Jump to content

floats in the container that doesn't expand


iwobar

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

.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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...