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

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

SIDE A
[+]
SIDE-B
[+]

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

Pick
Pick

CSS code

#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 600px;
	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 { 
	margin: 0;
	float: left;
	width: 450px;
	height: 1% /* Holly hack for Peekaboo Bug */
}

#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="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-right. The left column has a float left with an absolute fixed width. The right column has the same

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 2 columns and with a 2 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:

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?