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

This is a new twist on the Faux Columns method of equal columns. It's done by repeating sidebar.jpg on the Y-axis of both #sidebar and #content.

The usual method of building a 2-column layout uses a left margin on #content to make room for the left floated #sidebar. In this layout, left padding is used to make the room which allows the element to able to present sidebar.jpg.

A min/max width on #container makes the site somewhat responsive, #content has no width so it takes all the room left to it by #sidebar.

footer stuff here
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>        
    <div id="container">		
        <header>
        	header stuff here
        </header>		
        <div id="sidebar">				
            sidebar stuff here
        <!--end sidebar--></div>	
        <div id="content">
			content stuff here
        <!--end content--></div>				
        <footer>
        	footer stuff here
        </footer>		
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	max-width: 1260px;
	min-width: 780px;
	margin: 30px auto;
	background: #ccc;
}	
header {
	padding: 20px;
	background: #267f23;
	color: #ccc;
}
#sidebar {
	width: 180px;
	padding: 20px;
	float: left;
	background: url(sidebar.jpg) repeat-y;
}	
#content {
	padding: 20px 20px 20px 240px;
	background: url(sidebar.jpg) repeat-y left;
}
footer {
	padding: 20px;
	clear: both;
	background: #267f23;
	color: #ccc;
}
		
The image
sidebar image