Replicating float avoidance in standard compliant web browsers

HTML & CSS
1

In IE7- there is a nice way of “clearing” floats, as when there is not enough room for a block it drops below the float and the vertical margins just work right. The following code is a working example showing this behavior in IE7-

<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Title</title>
<style>
h1, h2, p {margin:20px;}
div.image {margin:0 20px;float:left;display:inline;height:50px;background-color:red;}
div#wrapper {width:760px;}
h2 {width:720px;}
</style>
</head>
<body>
<div id=wrapper>
<h1>Title</h1>
<h2>Section 1</h2>
<div class=image>image</div>
<p>Some text.</p>
<h2>Section 2</h2>
<p>Some more text.</p>
</div>
</body>
</html>

Using h2 {clear:both;} only gets it half right, because h2 gains uncollapsible margins.

Is there a way of replicating this good behavior of IE7- in standard compliant browsers only changing the CSS code?

BTW, do not cheat with h2:first-child to circumvent classistis on the first h2, as it is intended to be generic. :smiley:

2

Giving the h2 overflow:auto will drop it below the floated div. The top margin of the h2 will not be observed but you could add a bottom margin to the floated div.

Note that applying display:inline to a floated element is superfluous. float = block.