Jump to content

[SOLVED] reallllly weird CSS error


Recommended Posts

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.


.main_body {
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
border: 1px solid #BEBEBE;
padding-top: 15px;

<div class="main_body">the content of the div</div>

Link to comment
Share on other sites

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%; }

Link to comment
Share on other sites

I can garantuee you that

      html, body, div { padding: 0; margin: 0; height: 100%; }
      div { background: lime; } 

results in a very bright green screen.


And I to would like to know what your definition of auto expanding is.

Link to comment
Share on other sites

for instance...


check this page out:



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



Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.