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
|