Wikipedia style layout challenge

I’m trying to emulate the wikipedia.org layout using css. The problem is that with a fluid width layout, I can’t get the fixed width sidebar to float to the left of the content area. I’d like the sidebar to be fixed at 200px and the content to be fluid width. I know I can do it by absolutely positioning the sidebar, but I’d prefer not to use abs pos.

Any help much appreciated. I can’t alter the core markup, only the css…

Core structure is:


<body>
	<div class="wrapper">

		<div class="header">header area here. Logo, main menu and search widget will go here</div>

		<a id="jump"></a>
		
		<div class="main">

			<div class="content">
				<div class="entry"><p>This is the main content</p></div>
			</div>

			<div class="sidebar">This is the sidebar. Need this fixed width and floated to the left of the main content area</div>
			
			<div class="clear">&nbsp;</div>

			<p style="margin-left:15px;"><a href="#jump" class="jumpLink">&uarr; Back to Top</a></p>
		
		</div>

		<div class="footer">This is the footer area</div>

	</div>
</body>

Here is one basic way to do it:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>2 col left fixed</title>
	
<style media="all">
.main {overflow: hidden;}
.sidebar {float: left; width: 200px;}
.content {margin-left: 220px;}
</style>
	
</head>
<body>
	<div class="wrapper">

		<div class="header">header area here. Logo, main menu and search widget will go here</div>

		<p><a id="jump"></a></p>
		
		<div class="main">
		
		<div class="sidebar"><p>This is the sidebar. Need this fixed width and floated to the left of the main content area</p></div>

		<div class="content">
			<div class="entry"><p>This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content </p></div>
		</div>

		<p style="margin-left:15px;"><a href="#jump" class="jumpLink">&uarr; Back to Top</a></p>
		</div>
		<div class="footer">This is the footer area</div>

	</div>
</body>

</html>

Thanks but you reversed the order of the markup!

The content div must come before the sidebar :wink:

Then position the sidebar absolutely, and give the wrapper position: relative.

I worked it out without absolute positioning (except for IE7, which had to be abs positioned)…

.header {position:relative;min-height:200px;background:url(logo.png) no-repeat;}
.siteTitle,.tagline {width:200px;text-align:center;padding-top:120px}
.tagline {padding-top:10px}
.main {float:left;margin-left:200px;padding-left:40px;border:1px solid #aad4ff;border-width:1px 0 1px 1px;margin-top:-123px;}
*+html .main {width:75%;}
.sidebar {width:199px;margin-left:-240px;margin-top:150px}
*+html .sidebar {position:absolute;top:80px}
.content {float:right;margin-left:-200px;width:100%;padding:0 20px}
.clear,.footer{clear:both;}
.jumpLink {margin-left:-40px;}
.footer {margin-left:200px;}