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>