iwobar Posted May 15, 2009 Report Share 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 Link to comment Share on other sites More sharing options...
jlhaslip Posted May 15, 2009 Report Share Posted May 15, 2009 use overflow: auto on the outer div Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 15, 2009 Report Share 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 Link to comment Share on other sites More sharing options...
Susie Posted May 15, 2009 Report Share 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 Link to comment Share on other sites More sharing options...
PicnicTutorials Posted May 15, 2009 Report Share 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 Link to comment Share on other sites More sharing options...
iwobar Posted May 16, 2009 Author Report Share 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 Link to comment Share on other sites More sharing options...
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.