Non-wrapping float
If you want to have an image float to the left and not have the text wrap underneath it, it's usually easy enough - you float the image left and put a left margin on the text which is wider than the image. This technique is used a lot and in many kinds of layout.
However, what if you don't know the width of the image? CSS2 has the display value 'table-cell', which will do the job. Of course, predictably enough, Internet Explorer 6 doesn't support any of the 'table' display values, so there's a problem. Fortunately, IE does support 'display:inline-block;' which will do the same thing. This value was originally an IE proprietary value, but it was taken up for CSS3, so it validates.
Note: This doesn't work in Safari 1.2. or IE5... D'oh!
However, Paul O'Brien has a demo for this (with a different technique) which seems to work fine in any browser.
CSS
#nwf-container {
width:600px;
position:relative;
margin:auto;
border:1px solid navy;
padding:5px;
}
#left-image {
float:left;
padding:0 10px;
}
#right-text {
display:table-cell;
}
* html #right-text {
display:inline-block;
}
HTML
<h1>Non-wrapping float</h1>
<div id="nwf-container">
<div id="left-image"><img src="wine.jpg" width="100" height="100" alt="wine" /></div>
<div id="right-text"><p>If you want to have an image float to the left and not have the text wrap underneath it, it's usually easy enough - you
float the image left and put a left margin on the text which is wider than the image. This technique is used a lot and in many kinds of layout.</p>
<p>However, what if you don't know the width of the image? CSS2 has the display value <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">'table-cell'</a>,
which will do the job. Of course, predictably enough, Internet Explorer 6 doesn't support any of the 'table' display values, so there's a problem.
Fortunately, IE <em>does</em> support 'display:inline-block;' which will do the same thing. This value was originally an IE proprietary value,
but it was taken up for <a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216#display">CSS3</a>, so it validates.</p>
</div>
</div>
Comments
#1 #2Justin,
That's good to know. Thanks.
Ah, thank you so much for this blog, I've been trying to find out how to use floats without getting the text wrapping feature for a long time now, usually I just resorted to ... absolute positioning much to my hatred. So now I can use float for my divs and theres no wrapping yay!
it doesn't seem to be working in IE7
sm,
That's strange. It seems to work for me in IE7...
For IE7 you have to use *:first-child+html
* html is for IE6
This solved a HUGE headache for me. THANK YOU!
FYI, I just ran into this case and was able to work around it without using the "star" CSS hack. I used this:
display:table-cell;
display:inline-block;
Moz seems to picks up table-cell, and IE picks up inline-block, but since both styles act the same then it's less risky since even if a new IE or FF version starts supporting the one it doesn't support, it shouldn't break the page. I tested so far on IE6, IE7 & FF2.