Neurotic web design : 3 columns with background color, fixed width and any column largest Layout

CSS code

#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 700px;
	background: url("/path/to/your/background_cols.gif") repeat;
}

#header {
	margin: 0 0 15px 0;
	background: yellow;
}

#side-a {
	float: left;
	width: 150px;
}

#side-b {
	float: right;
	width: 150px;
}

#content { 
	float: left;
	width: 56%;
}

#footer {
	clear: both;
	background: #A2A2A2;
}

HTML code

<div id="wrapper">
	<div id="header">
		HEADER
	</div>
	<div id="container">
		<div id="side-a">
			SIDE A
		</div>
		
		<div id="content">
			CONTENT
		</div>
		
		<div id="side-b">
			SIDE B
		</div>
	</div>
	<div id="footer">
		FOOTER
	</div>
</div>

Image

You have to save this image because it is used to simulate the columns colors( Remember that the image path in a css is relative to this css)

How does it work

The order of code is left-center-right (i think it can be l-r-c too) The left column has a float left with an absolute fixed width. The right column has the same but with a float right. The center column has also a float left but with a width with %

In order to the column color expands to the bottom a background image is used in the wrapper. This image must be equal to the width of the 3 columns and with a 3 section color

Thanks to

Marta gave me the idea of putting a background image, after that i saw other models implementing the same idea.

For example:

Maybe someday i saw the idea of putting a % in the center column at the Internet, but in principle it was testing and some luck.

Thanks also to mailing lists ovillo.org and web standards group

Other methods to create color columns and any column largest

Other css tools of neurotic

Bugs

~~The backgroudn image didn't generate well.~~ Fixed
~~Now it doesn't validate because the & (the page itself not the columns)~~Fixed