j0hny j0hny - 18 days ago 5
CSS Question

CSS 100% width layout with two panels - why it doesn't work?

I'm sure there are lot of simillar questions about 100% layouts, but first I couldn't find one with this exact issue and second I want to know why is this happening.

I'm trying to create a liquid layout with divs and CSS. I am totally free to use CSS3 advantages and most importantly, I want it to be as clear as it can get.

I started by creating wrapper, inside it a 100px height header. Then I did a 250px width navigation (I tried also 25%, but the result is same) and a footer with 50px height. All other dimensions are 100% or using the CSS3 calc(100% - 150px) function. Problem is that the elements bellow header doesn't even show in the viewport. With little experimenting, I got the elements shown, but with problems like content div displayed bellow everything else (instead of aside left panel) or footer sticked in the middle of a page when it overflowed (absolute positioned), so none of them worked and they were all pretty dirty.

I tried floats, various dimensions, wrapping columns with another div, but still, I can't find a solution.

Here's my code

HTML:

<header id="head"></header>
<div id="over">

<nav id="side-nav"></nav>

<div id="content"></div>

</div>
<footer id="main-foot"></footer>


CSS:

html, body {
height: 100%;
padding: 0px;
margin: 0px;
background-color: white;
}

#over {
height: auto;
min-height: calc(100% - 150px);
}

#head {
height: 100px;
width: 100%;
background-color: #D1C5C5;
}

#side-nav {
float: left;
height: 100%;
width: 250px;
background-color: #AFAFC9;
}

#content {
float: left;
height: 100%;
width: calc(100% - 250px);
background-color: #AFC9B0;
}

#main-foot {
clear: both;
width: 100%;
height: 50px;
}


The code above is result of some experimenting, so there can be faults that I overlooked, but I tried every common solution.

I have a solution with some absolute positioning and I'm sure I can find bunch of other complicated ones, but I am really interested why this one doesn't work.

Is there someone who has deeper understanding willing to help?

PS: I don't need to support non-CSS3 browsers like IE6, 7, 8 and others...

Answer

Just modify your css for #over :

#over {
    height: 100%; /* Instead of auto */
    min-height: calc(100% - 150px);
}

That should solve your problem.

JSFiddle

height : auto sets the height as the height of its content, i.e its child elements.
height : 100% inherits the height of its parent.

So, here, #over calculates the height of #side-nav and #content which in-turn depend on the height of #over.

And since, #side-nav and #content don't have any content, so the height for all is 0.

So, this problem should be rectified as content builds up. One more solution would be to set min-height for #side-nav and #content with some px value.

Hope this helps.

Comments