Niko by Nik Korablin

I’ve been seeing quite a few websites (this one included) and tumblr blogs employing this technique. Of course, it is reminiscent of those old HTML frames found in abundance on old Geocities sites. These days with standards and CSS we can recreate those good old frames while keeping our website nice and clean.

The HTML

The basic layout uses 3 divs, a sidebar, the content area, and a container to wrap everything together. Nothing else to do here really.

<div id="container">
	<div id="side">
		Side Stuff
      	</div>
	<div id="content">
		Content
	</div>
</div>

The CSS

Now we can head on over to our stylesheet. First off, the container needs to be positioned absolutely and have the width set at 100%. That will stretch across the viewport.

#container {
	position:absolute;
	width:100%;
}

Next we can move on to our sidebar. Since the sidebar will be stationary have position:fixed and make it float: left. You’ll also want to set the width of the sidebar.

#side {
	position:fixed;
	float:left;
	overflow:hidden;
	top:0;
	left:0;
	width:305px; /* set a width */
}

And now for our content area. The margin-left will be the same as the width of your sidebar. Keep in mind that if you assigned padding to the sidebar, you’ll have to account for it in the margin. The width here is not entirely necessary and you could even place an inner div within content to contain the width.

#content {
	margin-left:305px; /* same as width of sidebar */
	height:100%;
	width:700px; /* width of content area */
}

Live Demo

View a live demo

Going Further

As seen on this very site, I have a background for my sidebar that stays fixed. To achieve this, you’ll want to assign a background-image to the container and have it repeat-y as well as be fixed.

#container {
	background:url(images/container_bg.jpg) repeat-y fixed;
	position:absolute;
	width:100%;
}