Non-wrapping float

wine

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
2008-08-20 Justin Grant says :

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.

#2
2008-08-20 BonRouge says :

Justin,
That's good to know. Thanks.

#3
2008-10-23 Eudaemon says :

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!

#4
2008-12-15 sm says :

it doesn't seem to be working in IE7

#5
2008-12-15 BonRouge says :

sm,
That's strange. It seems to work for me in IE7...

#6
2009-04-16 jenjenjen says :

For IE7 you have to use *:first-child+html
* html is for IE6

This solved a HUGE headache for me. THANK YOU!

Comment form

Please type the word 'curry' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url