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

Faux Columns

In the div#content below an 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 remain equal in height. - faux columns

If this #ads column is longer, the columns to the left will follow it.

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

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>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>     
    <div id="container">
        <header>
			<h1>Faux Columns</h1>
			<p>
                In the div#content below an 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 remain equal in height.   - faux columns
            </p>
        </header>
        <div id="content">
            <div id="menu">
                <p>
                	If this #menu column is longer, the columns to the right will follow it.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            <!--end menu--></div>
			<div id="ads">
                <p>
                	If this #ads column is longer, the columns to the left will follow it.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
			<!--end ads--></div>
            <div id="main">
                <p>
                	If this #content column is longer, both columns on either side will follow it.
                </p>
                <p>
                    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.
                </p>
                <p>
                    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.
                </p>
            <!--end main--></div>
        <!--end content--></div>
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 804px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
	font-size: 0.8em;
}
header {padding: 0 25px;}
#content {
	background: url(bg.jpg) repeat-y;
	overflow: auto;
}
	#menu, #ads {
		width: 120px;
		padding: 0 10px;
	}
		#menu {float: left;}
		#ads {float: right;}
	#main {	margin: 0 160px;}
		
The image that does it
faux columns img