Jump to content
Stef's Coding Community
j22cal

100% heights and clearing floats?

Recommended Posts

Looks like the fact that you are declaring both "height:100%" and "min-height:100%" is confusing the browser. If you remove the "height:100%" line that will fix things (at least, it does in Firefox -- I'd check other browsers as well). To ensure IE6 compatibility (IE6 doesn't support min-height), do this:

 

#main {
   width: 50%;
   margin-left: 200px;
   float: left;
   min-height: 100%;
   border: 3px green solid;
}
* html #main { height:100%; } /* targets IE6 only: http://en.wikipedia.org/wiki/CSS_filter#Star_HTML_hack */

 

You'll need to do this anywhere you've declared both a height and a min-height on the same element, so that includes the html, body and #container elements.

 

Also, since you're floating #main, you need to add "overflow:hidden" to the element that contains it -- #container.

Share this post


Link to post
Share on other sites

Ok, i will give what you said a try, just out of curiosity, when I float something like #main in the above example, would it help me to float the #container, body, and html as well?

Share this post


Link to post
Share on other sites

Why are you even floating? I don't see any reason/need for it in the code you're showing.

Share this post


Link to post
Share on other sites
Ok, i will give what you said a try, just out of curiosity, when I float something like #main in the above example, would it help me to float the #container, body, and html as well?

 

Depends on the situation and what you're trying to achieve. In most cases, I'd say no.

Share this post


Link to post
Share on other sites

I was just thinking that declaring each one as floated, would help them contain each other, by giving them position, not sure of the exact term there...

Share this post


Link to post
Share on other sites

But what are you trying to accomplish - are you just experimenting with floats to understand how things work? That's one thing, but for the layout you have here, there is no need to float anything.

Share this post


Link to post
Share on other sites

Mainly just experimenting with floats, and I was thinking that when you had a float, such as #main, that it would help to float the containing elements as well. Forcing them to better contain the floated div (#main)? I guess i might have been wrong on this point...

 

On the above code, I removed height: 100% and just used min-height:100% and the layout did work as expected once I added overflow: hidden; to the #container element. Thanks for the help on that! A few more questions...

 

What is the advantage of using min-height over height? and

Do I just need to add "overflow: hidden; to just the parent element, or all of the parents like (html, body, etc)?

Share this post


Link to post
Share on other sites
What is the advantage of using min-height over height?

 

The answer is kind of in the question. Min-height stipulates the minimum height the div can be, it can be longer but not shorter, doesn't work in IE6 though. Height is an absolute size, the div will be the given height, no longer or shorter. If your text or whatever in that div is going to expand it is not a good idea. If it's for a header that is not going to change then it's fine to give it a height.

Edited by virtual

Share this post


Link to post
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...