CSS float issue - css-float

Question

I have a page where there are two images on top which are floated to left and right as below :
.floatLeft{ float:left;}
.floatRight{ float:right; }
<div>
<img src="firstImage" class="floatLeft"/>
<img src="secondImage" class="floatRight"/>
<!-- wright here -->
</div>
Issue is when i write anything after images (be it in div or a plain text ) and if it goes beyong page width ,
the text after maximum width shifts downwords entirely after images . That is text doesn't wrap inbetween two images
What i understand about float is text should "FLOW" in between two images (unless we use clear which "clears" area around images ) , but its not working like that.
I want to have a text in between two images.
Any help is higly appreciated as a I have done a lot of efforts but it is not working.

Answer 1

Logically, you have 3 blocks of data here, so I suggest using 3 floating divs with set width:
.floatLeft{ float:left}
.div1{width:X%}
.div2{width:Y%}
.div3{width:Z%}
.overflow{overflow: hidden} /* this is optional */
<div class="overflow">
<div class="floatLeft div1">
<img src="firstImage"/>
</div">
<div class="floatLeft div2">
<!-- text here -->
</div">
<div class="floatLeft div3"><!-- or make it float right if you want -->
<img src="secondImage"/>
</div">
</div>
If you want your images a fixed width, try using CSS calc:
.div1{width:100px}
.div2{width:-moz-calc(100%-300px);-webkit-calc(100%-300px);calc(100%-300px);} /* not supported in some browsers */
.div3{width:200px}
But honestly I recommend to go classic way and use a table here:
.table {width:100%;border-collapse:collapse}
.table td {padding:0;margin:0}
.block1 {width:X%} /* or width:Xpx */
.block3 {width:Z%} /* or width:Zpx */
/* do not touch block2 here */
<table class='table'>
<tr>
<td class='block1'>
<img src="firstImage"/>
</td>
<td class='block2'>
<!-- text here -->
</td>
<td class='block3'>
<img src="secondImage"/>
</td>
</tr>
</table>
Remember to wrap your content in "blocks", it always helps when you mark up.

Answer 2

I guess this is the answer that you need jsfiddle
I will explain a little about.
in your div add a class of imgcontainer
in your css, add the following
.imgcontainer{
position:relative;
}
you can add the width of the div, in jsfiddle I set it as 150px. and each of the image is 50px. there you add paragraph with some text

Answer 3

Try this way
<div>
<img src="firstImage" class="floatLeft"/>
<p class="floatLeft">Some textgoes here</p>
<img src="secondImage" class="floatRight"/>
</div>
but give proper width

Answer 4

Another variation is using a CSS version of the table approach proposed by igorpavlov. You have to replace the table/tr/td by divs and to adapt the CSS as proposed here :
.table {width:100%; display: table;}
div{ display: table-cell; vertical-align: top;}
.block1 {width:33%} /* or width:Xpx */
.block3 {width:33%} /* or width:Zpx */
img {width: 100%; height: auto;}
<div class='table'>
<div class='block1'>
<img src="firstImage"/>
</div>
<div class='block2'>
<!-- text here -->
</div>
<div class='block3'>
<img src="secondImage"/>
</div>
</div>
It provides better semantics and works IE8+!