CSS template - Make div's move down rather than overlap

[TWM]

When the center content area has too much text, it overlaps the footer and continues down the page. I would like to have it push the footer down and expand the two div's on the bottom left and bottom right.

Index page code index | Copy Paste Code

stylesheet: css | Copy Paste Code

Thank you very much! First full CSS template

EDIT:
Reading more on this, i think that absolute positioning might be messing everything up. And i shouldn't be using it anyways?

 

[adamo]

Try changing instead top:1112px; bottom:0;

 

[TWM]

That would translate to the bottom of the browser window... so if the page runs longer than the browser window shows (below the fold) then the footer would be in the middle of the website.

 

[adamo]

I think you need to look up floats. or in newer browsers display:table-cell and display:table;

What I see here is a standard 3 column layout (faux columns). But you need to be more specific what are you trying to achieve. From the template I guess you would have something like this here 3 Column CSS Layout - Fixed Header and Footer
The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible.

 

[Mr Spy]

Probably best to steer clear away from absolute positioning unless you really have to. As adamo says, perhaps look up the theory of floats (is a lot more complex than most people think), but once you can grasp that - you'll be on the money