Jump to content

100% heights and clearing floats?


j22cal

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.

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

Link to comment
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)?

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