Looking for an alternative way to clear floats

HTML & CSS
1

Buongiorno from medieval York UK :slight_smile:

Ok on this site http://tutorial.davidclick.com/max-2-column.html the footer clears the floated columns with a clear:both; e.g.

#footer
{
clear: both;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}

Having read a tutorial (which has confused me) they suggest there is another technique i can make the footer clear the floated columns by using overflow hidden e.g:

{
float: left;
width: 900px;
overflow:hidden;

}

But alas when i try this the layout breaks :frowning: So my question is please: “What bit css would i need to add to the #content-container to clear the floated columns & push the footer in place if i did not want to add clear:both; in the footer?”

Any insights welcome :slight_smile:

2

I’m on a mobile now, so can’t say why the page breaks, but it shouldn’t. Overflow: hidden should work fine, but the common alternative is the “clearfix” method.

3

Here’s a link that detail options, including clearfix. http://pageaffairs.com/notebook/containing-floats

4

Hi,

You are mixing a few concepts there and I half answered this in your other thread :slight_smile: Containing floats and clearing floats are separate issues. You contain floats so that the parent will encompass the floats and you clear elements so that they clear the floated content.

First of all in your current structure you just need to add clear:both to the footer to effect the clearing.


#footer{clear:both}

No other fixes or css/html code are needed.

The footer will act as the clearing div itself - it does not need the height :1% and indeed that is dangerous to apply to real element as you may find the content limited to 1% in some cases. (As an aside the height:1% was a common hack to force layout in IE but is much safer to use zoom:1.0 instead even though it is invalid. Its no needed anyway because the element has a width which will already force haslayout).

Don’t float the footer either as it is not needed to float.

If your code structure did not contain a footer or if the footer was outside #content-container then in order to make #content-container enclose the two floated columns you would use a containing technique such as the clearfix method or indeed just adding overflow:hidden to #content-container (assuming you don’t need visible overflow). Overflow other than visible will contain child floats because it creates a new block formatting context and in that context will automatically take care of its child floats (the same as inline-block, display table, floats and absolutely positioned elements will as they all form new block formatting contexts).

Or using the old fashioned clearfix method you would do this:


#content-container:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
#content-container{zoom:1.0}

This basically puts some generated content after the content in that container and then clears it - just like your footer is already doing.

Or you may want to look at the revised clearfix method.

However your current structure needs neither as you can simply add clear:both to the footer.

5

Big thank you guys :slight_smile:

6

here is all you need for ie8+

.contain:after {
content:‘’;
display:block;
clear:both;
}