DIV layout issues

Hi

I am trying to convert my old TABLE based layout into a more flexible DIV layout. What I'm hoping to get is a basic frame which I can then populate the 'contents' section with.

The basic DIV layout is sort of right but the left and right nav columns are not in line with the the banner/topnav; also the hight of left/right/contents should stretch down to the footer, but if I put the hight at 100% it goes beyond the footer and creates a scollbar.

Here is the layout as it stands:
HTML

CSS:

Could anyone help cleaning up the last two issues for me/

Cheers

KS

Well I'm sure you won't find any ready made solutions here (and for good reason). Lets start with the wrong positioning of leftnav and rightnav. If you wrap contents, leftnav and rightnav in a div, and assign it 1000px width and set margin of that wrapper div as auto, your leftnav and rightnav will come along with the contents instead of going to the right and left edge of the browser. As far as equal height column goes, your problem is a bit strange, you have set footer to a fixed position. Generally with 2 or 3 columns, you want all of them to be of the same height as the longest column. That can be achieved with a few tricks (like bottom padding and negative margin etc). But your problem is a bit different so I can't suggest any solution for that...

Cheers for that, the left/right/contents panels are now together and in the center, I basically copied the banner DIV.

As for the height issue, I was just hoping there was a way of ding some sort of height = browser height (100%) but actually thinking about it, as all the panels (left/right/contents) will be white and as the footer is fixed to the bottom it probably doesn't matter.

New CSS:

Cheers for the help!

KS

Kevin its good to know that its working. However there is still some useless code in your CSS.
1. There is no use of position and top properties in banner, topnav, leftnav, rightnav, contents and middle. Actually float is not a valid value for position property. Look here.
2. center is not a valid value for float property as you've used in contents. Look here...