HTML and CSS Reference
In-Depth Information
Tip
So you want to filter a style that only IE/Mac can see? Thanks to Doug Bowman and Tantek Çelik,
there's a solution:
www.stopdesign.com/examples/ie5mac-bpf/
. What's that? You need to filter an entire
style sheet to IE/Mac? There's something for you, too, courtesy of Geoff Sheridan:
www.premonition.co.uk/
cssd/ie51-only.html
.
■
Easy Float Clearing
If you've worked with CSS layouts for any length of time, you've probably encountered the issue
of float clearing, especially for columnar layouts. Until recently, the standard method involved
inserting something like
<div style="clear:both;"></div>
as the last element within a con-
tainer
div
surrounding the floats, but that's a nasty way to accomplish the task. Now, thanks to
Tony Aslett (
http://csscreator.com
) and the fine folks at
positioniseverything.net
, we have
a better way.
Here we have a container
div
, a floated box, and a few block elements following the float:
<div class="container">
<div class="floatedbox">
<p>floated box</p>
</div>
<h3>Container 1</h3>
<p>(<em>without</em> easy clearing)</p>
</div>
And let's add a few styles for visual clarity:
.container {
padding:1em;
background-color:#eee;
border:3px solid #ddd;
}
.floatedbox {
float:left;
width:125px;
height:125px;
margin-right:1em;
padding:0 10px;
background-color:#fff;
border:3px solid #bbb;
}
This gives us the result shown in Figure 6-2. Since the float isn't cleared and is taller than the
containing element, it extends below the bottom border of its container
div
.
