Perfect Two-Column Layout For Blog using CSS

By Julia Khusainova • December 6, 2009 • Posted in Design, Tutorials • Comments Off

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Two-column layout is very popular nowadays. It’s easy-to-create, clean and extremely customizable. There are many ways to create a two-column page layout. This article covers the best method you can go with using float:left and float:right css properties.

All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. The layout does not require any css hacks, conditional comments and it is Valid XHTML strict markup and fully cross browser! What is also important – it is SEO friendly – you are getting rid of annoying table tags that clog the layout. The markup is clean and easy-to-read by search engines as the main content comes out before the side column.

The design can be done in two ways – as fixed width or fluid width. We will implement both case. There is not much difference in visual sense but fluid width layout will be stretched to match the page content whereas fixed width will have the constant width regardless of the content.

Let’s take a look at some of the modern web sites that use two-column design:

Let’s see how can we create a nice two-column design with the right sidebar. Here is what we will come up with:

Julia Khusainova - Perfect Two-Column Layout using CSS

Step 1 – Create basic markup

Let’s start with the basic markup. We use fully crossbrowser div-based markup. Here is the code.

<div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="pageWrap">
<div id="page">
<div id="content"></div>
<div id="sidebar"></div>
</div>
</div>
<div id="footer"></div>
</div>

Step 2 – Add styles

Now we need to style our content. Set the body width = 100% and add basic styles for font, background and text color. The main wrapper will be 1000px in width and as height as needed.

2.1 Fixed width

The fixed width style is considered not to be changed so we will put strict widths to both content div and sidebar div.

Set the basic styles for the whole site (page) in the tag, considering font, color and background. The page is set to 1000 px to fit the resolution of 1024 x 768, you can choose any width you need.

I will place the most important styles here:

body {
background:#FFFFFF;
color:#000000;
font-family:Arial,Helvetica,sans-serif;
font-size:62.5%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:100%;
line-height:normal;
}

#headerWrap {
border-bottom:1px solid #322820;
min-width:1000px;
}

#navigationWrap {
border-bottom:1px solid #FFFFFF;
height:2.5em;
min-width:1000px;
position:relative;
}

#navigation {
height:2.5em;
margin:0 auto;
position:relative;
width:1000px;
}

#pageWrap {
background:#FFFFFF;
font-size:1.1em;
line-height:1.6em;
margin:0 auto;
position:relative;
width:1000px;
}

#page {
position:relative;
width:1000px;
}

#contentWrap {
float:left;
width:700px;
}

#sidebar {
float:right;
padding-bottom:40px;
position:relative;
width:300px;
}

Now we have the basic structure of the site. Add css rules to style the site.

2.2 Fluid width

What is great in regards to the fluid width – you never know how wide you need it. Well we can handle this by measuring widths in percentages. Change you styles as follows:

#content {
width:70%;
}

#sidebar {
width:29%;
}

Step 3 – Make full-height right sidebar

To make the full-height sidebar there is a fix that should be applied to sidebar.

[sourcecode language='css']
div.clearfix {
display:block;
}

Not sure which one should you choose – fixed or fluid? Every layout has it’s advantages. Check out The Great Fixed Vs Relative Width Page Layout Debate