Good evening. Tonight’s topic is floats.
Below we have an oft-encountered situation where two elements are enclosed by a container.
Here is some demonstration XHTML…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/1">
<title>Clearing Floats</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel='stylesheet' href='style.css' media='screen' type='text/css' />
</head>
<body>
<div class='wrapper'>
<div class='container'>
<div class='floatLeft'>Left Float</div>
<div class='floatRight'>Right Float</div>
</div>
<div class='footer'>
<p>I should be below!</p>
</div>
</div>
</body>
</html>
…and some CSS.
.wrapper { margin: 0 auto; width: 500px; }
.container { width: 450px; background: #ff0000; padding: 10px;}
.floatLeft { margin: 10px; width: 200px; height: 200px; float: left; background: #00ff00; }
.floatRight { margin: 10px; width: 2px; height: 200px;float: right; background: #0000ff; }
.footer { background: #f0f0f0; }
The first element is floated left and his counterpart is floated right. Underneath there is a footer element such as might be should we wish to continue our document.
Taking a look at the result we see that the containing element has had the audacity to collapse in on itself. Curses!
Indeed, had there not been 10px of padding on that element, our little red friend would have disappeared from our view completely.
The true nature of the problem manifests itself when we look at the footer content, marked above in grey.
Of course, there are a number of solutions to this problem. One could add a clear like so:
.footer { background: #f0f0f0; clear: both;}This could be added to the footer element but then a further problem arises if we say, for arguments sake, that we wished to add a top margin to that footer element. It suddenly becomes dependent on the height of the floated elements. Not an ideal situation, as this would require us to use complex mathematics – such as addition – to calculate the size of the top margin based on the height of the floated element.
Extending the clearing logic a little further, you could add another element between the closing container tag and the opening footer element tag:
...
<div class='wrapper'>
<div class='container'>
<div class='floatLeft'>Left Float</div>
<div class='floatRight'>Right Float</div>
</div>
<div style='clear: both;'></div>
<div class='footer'>
<p>I should be below!</p>
...
But, young adventurer, this is an ignoble suggestion! It uses an unnecessary element purely for a stylistic effect. We are of finer stock than that, you and I, and require a more elegant solution.
Fortunately, we have one that is so elegant it requires simply two words to be added our containing div styles.
The answer is thus:
...
.container { width: 450px; background: #ff0000; padding: 10px; overflow: hidden;}
...
Magically we see the container div contain the two floating elements as was our intention. No extra markup required!
A much prettier solution, I’m sure you’ll agree – it reminds one of a fair maiden walking through the park on a summer’s day. Best of all, it works across all browsers, including the dastardly IE6.
I’ve been asked by Adam Baker of ManVsDebt fame to create a plugin that will help him organise his Stuff page.