One of the most widely used layout structures entail the placement of a small, set-width DIV – such as navigation, a quote, or a bio - within a larger wrapping DIV where the rest of the content is located. The markup for such will likely appear like this:

<div id=”outer”>
<div id=”inner”> <h2>A Column</h2></div>
<h1>Main Content</h1>
<p>Lorem ipsum</p>
</div>

We can appoint a width value for the #inner (i.e width:20%) but because it is a block element, the main content is expected to automatically wrap beneath unless we float it either to the left or right.
Thus, the problem begins. It is normal for the #inner to be shorter than the #outer. But if the #inner is set taller than the wrapping parent, it crosses over the bottom edge of #outer as if the #outer “forgets” its job to remember the activities of #inner once it is floated.

This problem could be addressed by using the following methods:
a. Markup: Adding extra markup could prove to be an unpleasant task but it could serve your purpose. Input a cleared element at the end of your content such as
. It is the same as inserting matchsticks in your window frame to prevent the window from jamming. The approach is effective but it places unnecessary elements on your page just so it could be rendered as desired.

b. Aslett/PIE Method: The system was developed by Tony Aslett from PositionIsEverything.com around a year ago. The new method has since grown in popularity due to its cleverness. Read how Aslett came up with the idea on the tutorial. To make the story short, Aslett and his colleagues used a not-so-popular pseudo class (:after) to position a hidden and cleared full-stop following the content.

c. Ordered List: Steve Smith from Orderlist.com developed a simpler method, which involves “Floating Nearly Everything” or FnE. It includes the outer DIV to manage how your design stacks. Steve adds that “it takes a little more tweaking.”

d. I have yet to warm up to Smith’s idea until recently when SitePoint Forum’s CSS expert Paul O’Brien showed that adding an overflow:auto to the outer DIV is the solution. I refused to believe it at first but after a few tests, Paul’s idea turned out to be flawless. It was actually so simple that I thought maybe scores of web developers had been using it all along without even thinking anything of it. Four colleagues at SitePoint were as surprised as I am after I showed them the example page.

Some margin and padding settings could create internal scrollbars. If the scrollbars cannot be removed, we discovered that the overflow:hidden actually has the same effect without generating the scrollbars. However, the use of hidden could cause some images to be cropped especially is they are located in the lower part of a page. The issues should not cause any major worries though.

Tags: Clearing Floats the Easy Way