Content

Disable CSS to see how a page should look without it.

Move sidebar to:

Markup structure for this layout:

<div id="container">
<div id="header"> Header here </div><!-- end header -->
<div id="col_wrap">
<div id="offset">
<div id="content"> Main content here </div><!-- end content -->
</div><!-- end offset -->
<div id="sidebar"> Sidebar content here </div><!-- end sidebar -->
</div><!-- end col_wrap -->
<div id="footer"> Footer content here </div><!-- end footer -->
</div><!-- end container -->

CSS for this layout:

#container {
	width: 95%;
	margin: 1em auto;
}
#offset {
	width: 100%;
	float: right;
	margin-left: -215px;
}
#content {
	margin-left: 215px;
	padding: 0 1em;
}
#sidebar {
	width: 200px;
	padding: 0 5px;
}
#footer {
	clear: both; 
	position: relative;
	z-index: 20;
}

/* FOR EQUAL-HEIGHT COLUMNS */
#col_wrap {
	overflow: hidden;
	float: left;
	width: 100%;
	position: relative;
	z-index: 10;
}
#content, #sidebar {
	padding-bottom: 50em;
	margin-bottom: -50em;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.