CODEWITHSUNDEEP
csslayouthtml
Loolooii
Loolooii

Reputation: 9190

Why doesn't height:auto work on these two elements?

I want my main-div and footer-div grow with the content (height:auto). height:auto works fine for the footer, but not for the main content. When I try it for the main-wrapper it messes up the page. To be exact, the footer takes over the whole footer and main together. The structure of my page is something like this:

<div id="page-wrapper">
 <div id="header"></div>
 <div id="main-wrapper"></div>
 <div id="footer"></div>
</div>

And this is the css of each div:

#page-wrapper{
    margin-left:auto;
    margin-right:auto; 
    width:85%;
    -moz-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    -webkit-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    border-right:solid 1px #CCC;
    border-left:solid 1px #CCC;
}
#header{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height:200px;
    background-color:#ffffff;

}
#main-wrapper{
    width:100%;
    height:auto; /* this line is the problem */
    margin-left:auto;
    margin-right:auto;
    background-color:#E5E7EE;
}
#footer{
    width:100%;
    height:auto;
    background-color:#ffffff;
}

UPDATE:

Inside main-wrapper I have these 2 divs:

#text-wrapper{
    width:60%;
    float:left;
    font-weight:300;
    padding-left:50px; 
 }

#login-register-field{
    float:right;
    width:300px;
    height:260px;
    background-color:#BDBCC4;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
    margin-right:40px;
    margin-top:80px;
    position:relative;

}

Could these be causing the problem?

Upvotes: 1

Views: 909

Answers (3)

kcho0
kcho0

Reputation: 169

May using MAX and MIN heigh attributes be another solution, somthink like:

#page-wrapper{
    margin-left:auto;
    margin-right:auto; 
    width:85%;
    -moz-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    -webkit-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    border-right:solid 1px #CCC;
    border-left:solid 1px #CCC;
}
#header{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height:200px;
    background-color:#ffffff;

}
#main-wrapper{
    width:100%;
    height:auto; /* this line is the problem */
    margin-left:auto;
    margin-right:auto;
    background-color:#E5E7EE;
}
#footer{
    width:100%;
    height:auto;
    max-height: 100px;
    min-height: 30px;/* or 0 if you wan to hide on null content*/
    background-color:#ADFADF;
    overflow:hidden;
}

Upvotes: 0

Eran Egozi
Eran Egozi

Reputation: 773

Define the height of the body and div, and you get what you asked for.
http://jsfiddle.net/r4mK7/2/

Upvotes: 1

Maayan Glikser
Maayan Glikser

Reputation: 873

There is no content inside both divs and css height property default is auto so you don't need to explicitly state it is unless it was overwritten by some other style rule.

If you left the divs empty on purpose of posting this issue then I believe whatever is causing the problem is missing.

There is no issue with growing with the content as you can see in this fiddle

Upvotes: 2

Related Questions