Category: Technical Blog

Anytime you use a float and the containing div of that float isn’t big enough to hold it, the floated element will overflow the containing div unless you clear it.

Example:
A blog page displaying 10 posts, some with floated images. Some posts are fine because they don’t have large, aligned images or have enough text to balance things out. But other posts with images aligned to the left or right and have little text and so seem to be running into the post below them. What is actually happening is that the post below is getting mis-aligned because it is not clearing the floated image.

You could just use a smaller image or add more text.

But what if:

You need to show a large image, a smaller one reduces the visual effect.
It isn’t your content, you can’t just add more to solve this issue.
You want the text in the post to show alongside the image rather than under it, you want to show information above the image above the fold.

What should you do? You should Clear your floats!

You could add
[html]<br class="clear"/> <!–or–> <div class="clear"></div> [/html]

Then add [css] .clear { clear: both } [/css] to the stylesheet. This would solve the problem but wouldn’t be semantically correct because [html]<div class="clear"></div>[/html]
is an *empty HTML element. It neither provides or formats any information. Also this must be added to each post manually and chances are your clients will not remember or care to have to do this.
Better to take care of the problem site-wide with CSS by adding [css] .containing-div { overflow:hidden } [/css] to the stylesheet. This rule should be applied to the innermost div that will be handling the overflow.
Example, if you have a document structure like this:

[html]<div id="content">
<div class="outer">
<div class="inner"><p><img src="/images/image.jpg" alt="" class="alignleft" width="650" height="820"/>My lovely, large image.</p>
</div> <!–closes #inner–>
</div> <!–closes #outer–>
<!–then the next post–>
<div class="outer">
<div class="inner"><p><img src="/images/image.jpg" alt="" class="alignleft" width="150" height="220"/>Text Text Text</p>
</div> <!–closes #inner–>
</div> <!–closes #outer–>
<!–then the next post–>
<div class="outer">
<div class="inner"><p><img src="/images/image.jpg" alt="" class="alignright" width="350" height="420"/>My lovely, medium image.</p>
</div> <!–closes #inner–>
</div> <!–closes #outer–>

</div><!–closes #content –>[/html]

Div.inner would need [css] div.inner { overflow:hidden;} [/css]
And div.outer would get [css] div.outer{clear:both;} [/css]

Then you and your clients can go nuts with class=”alignleft” without ruining the look of the page.

Using [html]<div class="clear"></div>[/html] a few times due to deadline pressure isn’t such a huge crime. I’ve done it. But it isn’t a good habit to get into.

Using *empty HTML elements to enforce styling is a slippery slope.
Ever seen this beauty?
[html]<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>[/html]
I have.
What about this gem?
[html]<div>
<p>content content content</p>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
</div>
[/html]

Both do the job of adding more space where needed when the content fell short and the designer needed to find a way to fix that for their page to look the way they wanted it to…
It’s not the best way to do it but a lot of the time a designer can’t rely on content alone in text or images to provide the formatting they need.Still, it’s better to take care of this in the stylesheet rather than in the html document.

P.S. I have made all these mistakes and many more far more hideous!