CODEWITHSUNDEEP
htmlcss
DonJuma
DonJuma

Reputation: 2094

Div height not fully stretching to 100%

I have a div that is set to 100% height, and it renders perfectly, yet I have two divs within it that will not stretch to 100%. For reference here is the css:

#page{
    background-color: #4C1B1B;
    width:85%;
    height:500px
    margin:auto;
    min-height:100%;

}

#pageleft{
    width:15%;
    float:left;
    border:3px solid #B9121B;
    border-left:0px;
    padding: 1% 2% 0 2%;
    -webkit-border-top-right-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomright: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    height:100%;
}

#pageright{
    width:75%;
    float:right;
    border:3px solid #B9121B;
    height:100%;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    margin:0% 3% 0% 0%;
}

Thanks in advance.

Upvotes: 1

Views: 1464

Answers (1)

James Montagne
James Montagne

Reputation: 78650

The problem is in your CSS:

#page {
    background-color: #4C1B1B;
    width:85%;
    height:500px;  <--- this should be 100%
    margin:auto;
    min-height:100%;
}

You have set the height of the parent div to 500px. So your elements are 100% of that. Change this to height: 100%.

Upvotes: 2

Related Questions