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

[English] [Espaņol] [Catalā]

SIDE A
[+]
CONTENT
[+]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin

SIDE B
[+]
Pick
Pick
Pick

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

Imagen de fondo

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

any comments?