How to Design a Two Column Layout for Your Website Using CSS

Oct 30, 2013, by admin

There are many ways to design a two column layout using Cascading Style Sheets (CSS). This article takes you through the steps of using one method. The code given here will also allow you to add an optional header and footer that spans both columns to your pages should you wish.

While there are many methods of using CSS to create a two-column site, this tutorial uses the float property to move one column to the side of another. In some ways, this method is more flexible than the absolute positioning method . It also allows you to add optional header and footer bars that span both columns if you wish.

The HTML Code for a Basic 2 Column Website

The HTML part of the code is fairly simple. You basically need 2 div blocks, one for each column.

<div id=”container”>
<div id=”navbar”>Navigation</div>
<div id=”content”>Content here</div>
</div>

The words “Navigation” and “Content here” are merely placeholders for the navigation side bar and main content. You should remove those words when you put your real content. The “container” div block is merely a block enclosing both the two columns, and is useful if you want to apply certain styles that affect both columns as a unit.
The CSS Code for a Basic 2 Column Website Using a Fluid or Liquid Layout (Relative Widths)

If you want a website where your page widths expand or contract according to how large your visitor’s browser window is, you should use relative widths for your columns.

The CSS code for this is simple.

#content {
margin-left:  20%;
}
#navbar {
float: left;
width: 20%;
}

The CSS code has to go either into the style section of your web page or an external style sheet. Here’s how to customize the code:

Changing the Width

The above style sets the side column for your navigation bar to 20% of the width of the browser window. Consequently, the left margin of the column containing your content is also set to start at 20% from the left edge of the browser window, otherwise your content will overlap with your navigation bar.

If you prefer that the width of the side column be wider or narrower, just change both the margin-left and width properties to the same value.

You can also use pixels for the width instead of a percentage. For example, to constrain your navigation bar column to 200 pixels, change each of the 20% values to 200px instead. The use of pixels is useful if you have a picture (such as a logo) that you want to place in the side column and don’t want the column to be narrower than your image.
How to Put the Navigation Bar on the Right

The code above puts the navigation menu in the left column, just like what you see on this page. If you prefer that the navigation menu be on the right, as is commonly found in blogs, change the code so that it looks like the following:

#content {
margin-right: 20% ;
}
#navbar {
float: right ;
width: 20% ;
}

Again, change “20%” to a value appropriate for your site.

Hope you all like the post to get more updates like the page Bugtreat Technologies and to get updates of our cs cart templates like the page Cs Cart Templates