j22cal Posted March 7, 2010 Report Share Posted March 7, 2010 About 3 pages worth of text in here.... Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 7, 2010 Report Share Posted March 7, 2010 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. Quote Link to comment Share on other sites More sharing options...
j22cal Posted March 7, 2010 Author Report Share Posted March 7, 2010 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? Quote Link to comment Share on other sites More sharing options...
Andrea Posted March 7, 2010 Report Share Posted March 7, 2010 Why are you even floating? I don't see any reason/need for it in the code you're showing. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 7, 2010 Report Share Posted March 7, 2010 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. Quote Link to comment Share on other sites More sharing options...
j22cal Posted March 8, 2010 Author Report Share Posted March 8, 2010 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... Quote Link to comment Share on other sites More sharing options...
Andrea Posted March 8, 2010 Report Share Posted March 8, 2010 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. Quote Link to comment Share on other sites More sharing options...
j22cal Posted March 8, 2010 Author Report Share Posted March 8, 2010 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)? Quote Link to comment Share on other sites More sharing options...
virtual Posted March 8, 2010 Report Share Posted March 8, 2010 (edited) 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 March 8, 2010 by virtual 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.