Aligning Images and Text Horizontally

miz sue · 09-04-2015, 12:11 AM

Hello!

Can someone show me what I'm doing wrong?!? I'm working on an epub and I need to align "image, text, image" horizontally so they stay aligned when the font size changes in the device.

My html is:

<div id="bigbox">
<div class="textbox">
<img src="images/c1.jpg" class="imageleft" alt="Image"/></p>
<img src="images/c2.jpg" class="imageright" alt="Image"/></p>
<p class="noindentt">George Washington was the first president of our country.<br/><b>Don’t you believe it</b>.</p>
</div>
</div>

My css is:

#bigbox
{
margin-right:0em;
margin-left:0em;
margin-top:0.7em;
margin-bottom:2.5em;
padding-right:1.5em;
padding-left:1.5em;
border-color:#EF3F35;
}
.textbox
{
display: inline-block;
}
.imageleft
{
float:left;
}
.imageright
{
float:right;
}
.noindentt
{
clear:both;
margin-top:-4em;
font-size:1em;
margin-left:2em;
margin-right:2em;
text-align:justify;
margin-bottom:0em;
}

Bigbox is perfect and works fine but I can't get Textbox to fit. The images are brackets; so its supposed to look like this:

{ znznznznznzn }
znznznzn

but I'm getting:

{ znznznzn
nznznzn }

If anyone can help me, I'd so appreciate the assistance.

Thanks,

Sue

Turtle91 · 09-04-2015, 11:49 PM

your .noindentt has the clear:both command which removes both of your float commands.

miz sue · 09-11-2015, 09:13 AM

Hi Turtle91,

Thanks for responding. I remember reading something that you had to put in the clear:both command so it didn't mess up the rest of the coding. So perhaps I should have put that command in the next paragraph outside of the grouping to make it work. I will have to try that. I did eventually get the problem solved and I'll post the answer next. I appreciate your input!

Sue

miz sue · 09-11-2015, 09:20 AM

Solution Found:

<div id="bigbox">
<div class="leftimage" img src="images/c1.jpg" class="imageleft" alt="Image"/></div>
<div class="rightimage" img src="images/c2.jpg" class="imageright" alt="Image"/></div>
</div>
<p class="noindentt">George Washington was the first president of our country.<br/><b>Don’t you believe it</b>.</p>

This aligned the two images which I then floated left and right in the CSS. The text within the images "noindentt" then moved up between them. Again, I adjusted the CSS until I got the text margin-top where I wanted it. So when a reader goes through the book, it doesn't matter what size font was used - the brackets remained aligned and in place.

09-04-2015, 12:11 AM	#1
miz sue Member Posts: 20 Karma: 10 Join Date: Sep 2011 Device: Sony PRS650	Aligning Images and Text Horizontally Hello! Can someone show me what I'm doing wrong?!? I'm working on an epub and I need to align "image, text, image" horizontally so they stay aligned when the font size changes in the device. My html is: <div id="bigbox"> <div class="textbox"> <img src="images/c1.jpg" class="imageleft" alt="Image"/></p> <img src="images/c2.jpg" class="imageright" alt="Image"/></p> <p class="noindentt">George Washington was the first president of our country.<br/><b>Don’t you believe it</b>.</p> </div> </div> My css is: #bigbox { margin-right:0em; margin-left:0em; margin-top:0.7em; margin-bottom:2.5em; padding-right:1.5em; padding-left:1.5em; border-color:#EF3F35; } .textbox { display: inline-block; } .imageleft { float:left; } .imageright { float:right; } .noindentt { clear:both; margin-top:-4em; font-size:1em; margin-left:2em; margin-right:2em; text-align:justify; margin-bottom:0em; } Bigbox is perfect and works fine but I can't get Textbox to fit. The images are brackets; so its supposed to look like this: { znznznznznzn } znznznzn but I'm getting: { znznznzn nznznzn } If anyone can help me, I'd so appreciate the assistance. Thanks, Sue

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Aligning text inside a <p> and an image <img> vertically (iBooks)	AlPe	ePub	1	10-20-2012 12:00 PM
Epub/Pdf readers that display text horizontally (on Mac OS X 10.6)	ilovepurple2234	General Discussions	0	10-31-2011 10:50 AM
Right Aligning Wrapped Text Only	ghostyjack	ePub	7	11-04-2010 08:54 AM
Correctly Aligning Text Within a Table	ghostyjack	ePub	3	07-28-2010 07:18 AM

09-04-2015, 11:49 PM	#2
Turtle91 A Hairy Wizard Posts: 3,108 Karma: 18727091 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	your .noindentt has the clear:both command which removes both of your float commands.

09-11-2015, 09:13 AM	#3
miz sue Member Posts: 20 Karma: 10 Join Date: Sep 2011 Device: Sony PRS650	Hi Turtle91, Thanks for responding. I remember reading something that you had to put in the clear:both command so it didn't mess up the rest of the coding. So perhaps I should have put that command in the next paragraph outside of the grouping to make it work. I will have to try that. I did eventually get the problem solved and I'll post the answer next. I appreciate your input! Sue

09-11-2015, 09:20 AM	#4
miz sue Member Posts: 20 Karma: 10 Join Date: Sep 2011 Device: Sony PRS650	Solution Found: <div id="bigbox"> <div class="leftimage" img src="images/c1.jpg" class="imageleft" alt="Image"/></div> <div class="rightimage" img src="images/c2.jpg" class="imageright" alt="Image"/></div> </div> <p class="noindentt">George Washington was the first president of our country.<br/><b>Don’t you believe it</b>.</p> This aligned the two images which I then floated left and right in the CSS. The text within the images "noindentt" then moved up between them. Again, I adjusted the CSS until I got the text margin-top where I wanted it. So when a reader goes through the book, it doesn't matter what size font was used - the brackets remained aligned and in place.

Advert