0

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/

2
  • 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 2, 2013 at 9:51
  • don't not use height:100% use height:auto Aug 2, 2013 at 9:56

4 Answers 4

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;

}
2
0

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

0

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.

0

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

  1. Remove the height:100% on the #pagebody and add overflow:hidden.
  2. 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
       }
    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.