Question

I am having problems working on a project for school, what we are doing is creating div sections. And within each div section I color coded them to see them more clear. Though in my leftnav div it will not branch down to the bottom to the footer. JSFIDDLE here- http://jsfiddle.net/rM8zw/

if someone could help me fix this and explain what i did wrong? I have three container divs, so that some of my inherits would work correctly. Container for leftnav and bodyline, container for main site, container for BmiddleLeft and Right. Thanks guy ahead of time.

I am trying to figure out why my #leftnav will not complete its height to my bodyline so it is even.

heres the CSS-

#container{
    width:980px;
    height:auto !important;
    height:900px;
    min-height:900px;
    padding-top:20px;
    padding-bottom:20px;
    margin: 0 auto; 
    boder: solid 0px;
    overflow:hidden;
}
#holder{
    width:980px;
    height:auto !important;
    height: 800px;
    min-height:800px;
    padding:0;
    margin:0 auto; 
    border: solid 0px;
    overflow:hidden;
    background:#FFF;
}
#header{
    width:980px;
    height:100px;
    border:solid 0px;
    margin:0 auto;
    padding:0;
    background:#FF0000;
}
#navbar{
    width:980px;
    height:40px;
    border:solid 0px;
    margin:0 auto;
    padding:0;
    background:#c0c0c0;
}
#bodycontainer{
     width:980px;
     height:800px;
     min-height:800px;
     height:auto !important;
     overflow:hidden;
}
#leftnav{
     float:left;
     width:200px;
     height:1200px;
     min-height:1200px;
     height:auto !important;
     padding:0;
     overflow:hidden;
}
#bodyline{
     float:right;
     width:780px;
     height:800px;
     min-height:800px;
     height:auto !important;
     background:#00FF40;
     overflow:hidden;
}

heres the HTML I am currently using-

<div id="container">
    <div id="holder">
    <div id="header">
    </div>
    <div id="navbar">
    </div>
    <div id="bodycontainer">
        <div id="leftnav">
        </div>
        <div id="bodyline">
            <div id="Btop">
            </div>
            <div id="BmiddleCont">
                <div id="BmiddleLeft">
                hello
                <br />
                </div>
                <div id="BmiddleRight">
                </div>
            </div>
            <div id="Bbottom">
            </div>
            <div id="BbottomLast">
            </div>
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</div>

hope this is a little better.

Answer 1

If you set the min-height as inherit, then it will go up until it finds a value. In this case, up to #container, which has it set to 900px. That’s why the height of your #leftnav is only 900px. min-height overrides height. Furthermore, if you take min-height out and keep height: auto, then you have no restrictions imposed on the height, so the height of your leftnav becomes the height of its content. Which is 0 in this case.

There are a few ways in which you could set its height. The easiest one of all, since you are explicitly setting heights on all the elements on the right, would be to add them up and then explicitly set that resulted value as the height of your leftnav.

If those values are just dummy values and the heights of the elements on the right will depend on the height of the content in them, then you have a couple of options:

1. Actually setting the height of your #leftnav to the height of its parent (#bodycontainer). You do that by setting its position to absolute (and don’t forget to set position: relative on the parent) and its top, left, bottom values to 0. In this case, you’ll also have to set the padding-left of its parent (#bodycontainer) to the same value as #leftnav‘s width (200px here). Or set left-margin: 200px; on its sibling (#bodyline) to avoid having to modify the width of #bodycontainer or to set its box-sizing to border-box. – DEMO

2. Make it look like it has the same height.

a) The easy method. Use a gradient with color stops as the background of the parent (#bodycontainer) – DEMO // demo without redundant code

background: linear-gradient(left, #FF00FF 200px, transparent 200px);

Keep two things in mind:

• one, you’ll have to add prefixes, as gradients are not yet supported unprefixed
• two, this won’t work in IE9 or older

(see caniuse.com for more details)

b) The best compatibility method (works in IE8+). Use a pseudo-element on the parent, #bodycontainer, position it absolutely, set its top, left and bottom values to 0, give it #leftnav‘s width and the desired background. – DEMO // demo without redundant code

#bodycontainer:before {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 200px;
    background: #f0f;
    content:'';
}