Layout

Lets say that you wanna make a simple website with 2 columns. One for yur navigation and the other for the content area.

1
2
3
4

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

CSS

Lets just make up something quick, after all it is just a demo :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#master {
width:500px;
height:600px;
border:2px solid #000000;
}
#navigation {
float:left;
width:200px;
height:600px;
border-right:1px solid #000000;
background-color:#eeeeee;
}
#content{
float:left;
width:300px;
height:600px;
}

So, what we have here is basicly a very simple setup, where our columns have 600px heigh.
The height is static and if we make our #content heigher or lower then our #navigation then
our #navigation won’t be effected, since it’s height is not dynamic and our <div>’s arnt linked
together. Now this is the place where some webdevelopers start to use all kind of tricks with
JavaScripts, but there is a very simple and easy way of making this just by using CSS as we know it.

CSS step 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#master {
width:500px;
min-height:600px;
border:2px solid #000000;
overflow:hidden;
}
 
#navigation {
float:left;
width:200px;
min-height:600px;
border-right:1px solid #000000;
background-color:#eeeeee;
margin-botttom:-32000px;
padding-bottom:32000px;
}
 
#content{
float:left;
width:300px;
min-height:600px;
margin-botttom:-32000px;
padding-bottom:32000px;
}

Explanation

As you can see the code is very simple and what we basicly did was just to make the #master with overflow:hidden and maid our heights dynamic by using min-height + our two columns have a small trick with margin and padding, that makes a 32000px height “buffer” wich is hidden by the overflow:hidden on our #master. Now the reason why our #master now is dynamic is because we havent sat a static height on it. So eachtime our colums get longer the overflow will show more and more of our 32000px buffer.

At the end I wanna wish you all happy coding!