CSS layout help.

[Guest]

Hi, im trying to have the left & right columns at the edge of the pages, so the whole page can expand to your monitor size. The problem is when I make the browser window smaller the right hand column always drops down below the middle box.

How would I set it up to work like a normal table? more or less?

This is my current code, page width is 100% with no margin:

.colLeft {

	position: absolutely;

	left: 0px;

	width: 160px; 

	padding-left: 5px;

	padding-right: 5px;

	float: left;

}

.colMid {

	position: relative;

	padding-left: 0px;

	padding-right: 0px;

	width: 78%;

	float: left;

}

.colRight {

	position: absolutely;

	width: 160px; 

	padding-left: 5px;

	padding-right: 5px;

	float: right;

Cheers!

[Guest Insurrectus]

First of all, "position: absolutely;" is incorrect

This tag should read "position: absolute;"

Then you will need to comment out the width section of div #pageSurround:

#pageSurround {

/*width: 890px;*/

Your column classes should look something like this:

.colLeft {

position: absolute;

left:5px;

top:125px;

width: 160px;

padding:0 5px 0 0;

}

.colMid {

margin:0px 165px 50px 165px;

}

.colRight {

position: absolute;

right:5px;

top:125px;

width: 160px;

padding:0 0 0 5px;

}

I am implementing the same thing on my site: One Crafty Mama

[Guest]

Great thanks, I will give it a go shortly. I don't tend to have any nav on the right s oI thought I would try to change the layout of the shop slightly to make it more user freindly. Cheers!