ohdang888 Posted May 5, 2009 Share Posted May 5, 2009 When i get rid of the height attribute, the div does not show up at all. All the content in the div is still there, but the background/border disappear. It's weird. When i set height:100%, that does nothing either. The height or min-height has to be declared in a set number of px or else it won't show. I am explain good enough? Lol. <style> .main_body { margin-right: auto; margin-left: auto; background-color: #FFFFFF; border: 1px solid #BEBEBE; padding-top: 15px; height:900px; width:900px; } </style> <div class="main_body">the content of the div</div> Quote Link to comment Share on other sites More sharing options...
Axeia Posted May 6, 2009 Share Posted May 6, 2009 height: 100%; is only as high as it's parent. So in order for a div to 100% high both body/html need to be set to 100% height, as well as any parent of your div. html, body, .main_body { height: 100%; } Quote Link to comment Share on other sites More sharing options...
ohdang888 Posted May 6, 2009 Author Share Posted May 6, 2009 it has no parent other than body. And i used your code, and change mine, and nothing happened. It's still not auto expanding. Quote Link to comment Share on other sites More sharing options...
Ken2k7 Posted May 6, 2009 Share Posted May 6, 2009 Define auto-expanding. Quote Link to comment Share on other sites More sharing options...
Axeia Posted May 6, 2009 Share Posted May 6, 2009 I can garantuee you that <html> <head> <style> html, body, div { padding: 0; margin: 0; height: 100%; } div { background: lime; } </style> </head> <body> <div></div> </body> </html> results in a very bright green screen. And I to would like to know what your definition of auto expanding is. Quote Link to comment Share on other sites More sharing options...
ohdang888 Posted May 6, 2009 Author Share Posted May 6, 2009 for instance... check this page out: http://bookmark.socialapps.sclek.com/beta/contact/privacy.php?istommy=1 that's what happens when i use your code you gave me. Its pretty much doing the same as declaring the height in pixels. By auto-expanding, i don't mean anything complicated. I just mean that the height of the div changes with the content (like it NORAMLLY does). But if i declare height as auto, it doesn't show up. Thanks for helping btw Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted May 6, 2009 Share Posted May 6, 2009 Axeia didn't advise using "position: absolute". No wonder the layout is blowing up. If you USE "position: absolute" DON'T expect your layout to be "flexible"! position: absolute has no impact on any other element, tag, div within the markup. No other element, tag, div, select has any impact on a position: absolute element (unless sometimes when first contained within a position:relative parent). DO NOT USE position: absolute FOR YOUR WIRE-FRAME LAYOUTS if you want it to be flexible. Learn and use floats, relative text (percentage or ems) and layoff declaring heights. If you use fixed layouts, don't set pixel heights at all. If it is a float use the clearfix to control the hasLayout triggers in IE. I recommend Dan Cederholm's "Bulletproof Web Design". It is all about avoiding exactly what happened to you. It is well worth the $25 U.S. on Amazon if you buy it via his website, "simple bits". Good luck Quote Link to comment Share on other sites More sharing options...
ohdang888 Posted May 6, 2009 Author Share Posted May 6, 2009 oh wow. so what do i need to do to fix this? Quote Link to comment Share on other sites More sharing options...
stewart Posted May 7, 2009 Share Posted May 7, 2009 oh wow. so what do i need to do to fix this? If you are referring to the page you linked a couple of posts above is the one having the problems then... I do believe you are having problems because the content within your .main_body class is all either floated or absolutely positioned. Well as a result they take up no "vertical space" to fill a parent element out with. The solution ? They need to be "cleared". One quick hack-y method to go about doing it would be putting in a page break, <br /> inside the main_body div after all of your content and give it a style="clear: both;".. The better way to go about it would take that footer of yours, with the Contact Us link, etc.. first, give it a container and give it 100% width as a footer inside of your main_body and give the footer class a clear: both; That should take up space inside main_body (with it's height set to auto, or not set at all.) Hope this is helpful. Figured it was a good first post. Quote Link to comment Share on other sites More sharing options...
ohdang888 Posted May 7, 2009 Author Share Posted May 7, 2009 yes! that helps a LOT. thanks!!!!1 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.