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"> </div>
<p style="margin-left:15px;"><a href="#jump" class="jumpLink">↑ Back to Top</a></p>
</div>
<div class="footer">This is the footer area</div>
</div>
</body>
<!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">↑ Back to Top</a></p>
</div>
<div class="footer">This is the footer area</div>
</div>
</body>
</html>