Dynamic columns without using JavaScripts

We all remember how easy it was to make a website with 2,3 or even more columns by using <table> design. The way the cells ware attached to each other in <table>’s maid it easy for webdevelopers to have a background color in one of the columns that was following maximum height of the heighest column. Today we all use <table> less designs since <table>’s are to slow and “hard” to controle when we talk about cross browser-optimation. So here I’m going to show you a small and easy fix in how you can get the same effect with your <div> designs without using JavaScripts or any kind of fancy CSS hacks that might not work in other browsers.

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!

Comments

• Pages

  • Equal Height Columns
  • FormHighlighter

• Categories

  • CSS (1)
  • jQuery (5)
  • Music (1)
  • Uncategorized (1)

• Please visit

  • Dyrebar
  • jQuery
  • The Daily WTF

• Archive

  • February 2010 (2)
  • December 2009 (1)
  • October 2009 (3)
  • September 2009 (2)