iwobar Posted May 15, 2009 Report Posted May 15, 2009 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 Quote
falkencreative Posted May 15, 2009 Report Posted May 15, 2009 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. Quote
Susie Posted May 15, 2009 Report Posted May 15, 2009 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. Quote
PicnicTutorials Posted May 15, 2009 Report Posted May 15, 2009 .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. Quote
iwobar Posted May 16, 2009 Author Report Posted May 16, 2009 Hi, That is so helpful. I am back to my site now, trying out your tips. Thanks a lot everyone! Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.