floats in the container that doesn't expand

[iwobar]

dear all,

 

Could anyone explain following situation:

 

I have a container div, with 2 floats in it. Container height is set to auto, so I thought it will expand with the flats. It doesn't. I set a border to see how it behaves, and my container seems to be 1px height.... Only the border. Why?

I have a footer that i wanted to be under floated divs, but it is under banner. Why? Please help. Thanks in advance.

http://www.iwobar.net/test/template.html

[jlhaslip]

use overflow: auto on the outer div

[falkencreative]

Either use overflow:auto on your #container as jlhaslip suggested, or insert a clearing div just before the closing #container div tag:

 

 

 

and in your css:

 

.clear {clear:both; height:0; overflow:hidden; margin:-1px 0 0 0;}

 

I have had the occasional issue with IE6 when using overflow:auto (rather than expanding the entire container, IE6 sometimes adds an extra scrollbar and allows the user to scroll that div), so that is another alternative.

[Susie]

And another tip is if you use the overflow:auto; method, you may need to add display:inline; to the floats so that IE 6 will behave.

[PicnicTutorials]

.clear {clear:both; height:0; overflow:hidden; margin:-1px 0 0 0;}

The negative margin thing (along with height 1px) is now longer needed anymore. It was for ie5 or something. I use...

.clear {

clear:both;

line-height:0;

height:0;

font-size:0;

}

 

I have had the occasional issue with IE6 when using overflow:auto (rather than expanding the entire container, IE6 sometimes adds an extra scrollbar and allows the user to scroll that div), so that is another alternative.

 

That's why overflow hidden is better. Although, IE6/7 don't need overflow at all. They each just need "haslayout". Overflow anything (other than visible) gives haslayout to IE7 and then whatever else you want to use gives haslyout to IE6.

 

Or...

 

You can float the parent container in order to contain it's floated children.

 

Or...

 

#container:after {

content:" ";

display:block;

clear:both;

}

 

and then for IE, the container needs "haslayout", which is most likely already taken care of with a width.

 

Or...

 

Display table.

[iwobar]

Hi,

 

That is so helpful. I am back to my site now, trying out your tips. Thanks a lot everyone!