CSS Div not going 100% height for my content

Question

I have this CSS Code:

html, body {
    font-family:Arial;
    padding:0;
    margin:0;
    background:#0CF;
    height:100%;
}

#wrapper {
    width:100%;
    height:100%;
}

#page-body {
    width:75%;
    min-height:600px;
    height:100%;
    border-top:5px solid #c6d6e9;
    background:#c6d6e9;
    margin:10px auto 30px auto;
    padding:10px;
}
#page-body-inner {
    width:100%;
    margin:0 auto 0 auto;
}

.page-left {
    display:inline;
    float:left;
    width:190px;
}
.page-right {
    display:inline;
    float:left;
    width:700px;
    height:100%;
    margin-left:15px;
}

for some reason, the height of the content on the right is not 100% so the text goes off the div with a background colour.

here is a fiddle: http://jsfiddle.net/yKCJG/

try `display:inline-block` you cannot set dimensions for `inline` objects, also you may want to use min-height 100% on your html and body as if your content is longer than your viewport it will get cut off — Pete, Aug 02 '13 at 09:51

score 1 · Accepted Answer · answered Aug 02 '13 at 09:52

1

try this #page-body add display:table;

http://jsfiddle.net/yKCJG/2/

#page-body {
    width:75%;
    min-height:600px;
    height:100%;
    border-top:5px solid #c6d6e9;
    background:#c6d6e9;
    margin:10px auto 30px auto;
    padding:10px;
    display:table;

}

answered Aug 02 '13 at 09:52

Falguni Panchal

8,873
3
27
33

Note that Internet Explorer only supports `display: table` since version 8. The other major browsers have had good support for a time. http://caniuse.com/css-table – michaelward82 Aug 02 '13 at 09:56
@michaelward82 please check http://stackoverflow.com/questions/3764699/internet-explorer-8-bug-with-display-table – Falguni Panchal Aug 02 '13 at 10:04

score 0 · Answer 2 · answered Aug 02 '13 at 09:59

Try this just remove the height:100% and put height:auto

#page-body {
    background: none repeat scroll 0 0 hsl(213, 44%, 85%);
    border-top: 5px solid hsl(213, 44%, 85%);
    display: inline;
    float: left;
    height: auto;
    margin: 10px auto 30px;
    min-height: 600px;
    padding: 10px;
    width: 75%;
}

Hope it will help

score 0 · Answer 3 · answered Aug 02 '13 at 10:05

Don't restrict the height of elements to 100%. You can apply that for min-height. The problem is when you float elements they lose their scope to parents. So, you got to apply a clearfix to the parent element whose childs are floated.

The best one is NicolasGallagher's clearfix.

Easy to use. Import this and add class name as 'cf' to the parent element ('page-body' in your case). That's it, now the child element increases the dimension of parent element even if it's floated.

score 0 · Answer 4 · answered Aug 02 '13 at 10:18

It's because the inner divs are floated so the parent div #pagebody has no actual height. There are 2 ways to solve this.

Remove the height:100% on the #pagebody and add overflow:hidden.

Remove the height:100% on the #pagebody and add:

#page-body:after{
   content: '.';
   display: block;
   overflow: hidden;
   visibility: hidden;
   font-size: 0;
   line-height: 0;
   width: 0;
   height: 0;
   clear:both
   }

CSS Div not going 100% height for my content

4 Answers4