Back to CSS Tips
Preview: what the working site looks like.

here is the background image:

background image

In the box below that image is repeated on the y axis to create the illusion of 3 columns. When you put content in it doesn't matter which column is longer, the tallest column pushes the image down and all three colums get longer. - faux columns

As always, view the source to see how it's done.

If this content column is longer, both columns on either side will follow it.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

The markup
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>faux columns demo</title>
</head>
<body>
                

here is the background image:

background image

In the box below that image is repeated on the y axis to create the illusion of 3 columns. When you put content in it doesn't matter which column is longer, the tallest column pushes the image down and all three colums get longer. - faux columns

As always, view the source to see how it's done.

If this content column is longer, both columns on either side will follow it.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</body> </html>
The CSS
 
                html, body {
	font: 16px "Comic Sans MS";
	background: #FC6;
	text-align: center;
}
* {
	margin: 0;
	padding: 0;
	border: none;
}
#wrap {
	width: 804px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
}
	.narrow {
		width: 400px;
		margin: 0 auto;
	}
.taller {
	padding: 10px 0;
	background: url(bg.jpg) repeat-y;
	overflow: auto;
	border-top: 4px solid #fc6;
}
	#menu {
		width: 140px;
		float:left;
	}
	#main {
		width: 400px;
		margin: 0 0 0 200px;
		float: left;
	}