Forum Moderators: not2easy
.floater {
float:right;
}<div class="floater"><img src="some-image" width="200"><div class="caption">Caption</div></div>
<h2>Title of this section</h2>
<p>Content of this section. Content of this section. Content of this section. Content of this section. Content of this section. </p>
What I would like is for the h2 and the p to drop below the floated image if there isn't, say, 10em of space available. Essentially, set a min-width that subtracts the width of the floated element from the containing element (let's just assume for the moment that we're using a browser that supports min-width).
The problem is that from the perspective of block sizing, the floated element takes up no space. So though the text flows around the image, if you set a background color, you can see that all browsers that I've tried it with (IE 5+, FF1, Opera 8.5) all extend the block out to 100% of the containing div.
So the space available for text is
(width of containing div) - (width of floated div)
But for the purposes of min-width calcs, the width available is
(width of the containing div)
I've tried a number of border/margin tricks and such, but can't get anything to have the desired effect.
I should point out that this is for a dynamic application where I can't really know the size of the floated div in advance, so I can't just decide that the min-width of the h2 would be (width I want + width of the floater).
Ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
body{font:62.8%/1.5 Arial, Tahoma, sans-serif;}
.floater{float:left;}
.other{float:left;width:10.0em;}
</style>
</head>
<body>
<div class="floater">
<img src="your_image.jpg" width="200">
<p>Caption</p>
</div>
<div class="other">
<h2>Title of this section</h2>
<p>Content of this section. Content of this section. Content of this section. Content of this section. Content of this section. </p>
</div>
</body>
</html>
The result is two floated divs side by side, one with a width, the other whose width is "shrinkwrapped" to the width of the content image. If you shrink the browser window, you'll see that when the viewport width gets smaller than the combined width of the floats, the .other div wraps below the .floater.
This is a float-wrapping behavior which prevents two floats whose widths exceeds their container from sitting side by side. The min-width calculation problems you were experiencing are not a factor here because two floats interact differently than a float and a non-float, namely in that their borders side side by side, rather than one sliding under the other.
If you place them in a widthed container, the determination of whether or not .other gets wrapped should depend entirely upon the calculated width of the .floater div.
cEM
The hitch is that I don't know the width of the image or whether or not there will be an image, so I can't set the width of the other float.
With your solution, if I let the width be dynamic (i.e. don't set it), the .other will expand to take the whole space and push the image down below. If I do set a width, it will leave a big blank spot whenever the image is smaller than the max space I've allowed.
Maybe it's just asking too much.
