-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Mastering CSS
By :

Okay, so let's look at our problem. You've learned how to change stacked rows into horizontal columns in order to achieve a multicolumn layout, but our containing element around our floated elements has totally collapsed and lost its height because all the elements inside it are floated. As a collapsed element, it doesn't look like it's responding to the margin-bottom
property or the background-color
we've assigned to it. So, in this section, we'll look at four separate methods to fix this collapse, and we'll try to understand the best way to deal with it. First, we'll use the clear
method, followed by the overflow: hidden
method, followed by the float
method, and then finally the most preferred method: the clearfix
hack.
Let's solve this using the clear
property. What we'll do at the end of secondary-section
is add a class of clear
to a new div
, using the following code:
<div class="clear"></div>
Next, we'll go into our CSS...