Creating A Two Column Layout For Your Website Through CSS

web design, CSS, website, website layout

There are various ways for creating a two column layout through Cascading Style Sheets (CSS). This article illustrates the steps of implementing an easy and effective method. The code presented in this article will also enable you to incorporate an optional header and footer that spreads across both the columns of your pages.

Prerequisites

In order to implement the steps mentioned below, it is important for you to have knowledge of coding directly in both, CSS and HTML. In case you are unable to use visual web editor for designing your website. For instance, Dreamweaver incorporates a wide range of templates for setting up 2 to 3 column websites through CSS.

Note that there is no need for you to be an expert in writing CSS or HTML code. All you need is some basic working knowledge for implementing the steps mentioned in this article.

Using Float to Define 2 Columns

Although there are many methods for using CSS in order to create a two-column website, this article illustrates the float property in order to move one column to the side of another. Sometimes, this method is more flexible as compared to the absolute positioning method. This method also enables you to add optional header and footer bars that span across both the columns.

Compatibility

The two-column CSS given here is tested to work on Internet Explorer 6 and 7, Firefox, Opera, and Safari.

The HTML Code For Creating A Basic 2 Column Website

The HTML part of the code is extremely simple. Basically, you will require 2 DIV blocks for the two columns

<div id=”container”>

<div id=”navbar”>Navigation</div>

<div id=”content”>Content here</div>

</div>

The words ‘content here’ and ‘navigation’ are just placeholders for the navigation side bar and the main content. These words have to be removed when you put your real content. The div block ‘container’ is just a block enclosing the two columns and it is useful if you would like to apply some styles that have an effect on both the columns as a unit.

The CSS Code Required For Creating A Basic 2 Column Website With a Fluid or Liquid Layout (Relative Widths)

If you desire to create a website in which the web page widths expand or contract in accordance with the visitor’s browser window, you must utilize relative widths for your column. For instance, if you change the size of your browser window, the article column will be reformatted by your browser in order to fit within the window.

The CSS code for doing this is mentioned below:

#content {

margin-left:  20%;

}

#navbar {

float: left;

width: 20%;

}

The CSS code has to be incorporated either in the ‘style’ section of your web page or in an external style sheet.

Here is the procedure to customize the code:

1.    Modifying The Width

The above mentioned style sets the side column for the navigation bar to 20% of the width of the browser window. Accordingly, the left margin of the column comprising of the content is also set to start at 20% from the left side of the browser’s window; otherwise, the content will overlap the navigation bar.

If you wish to have the width of the side column wider or narrower, all you have to do is change both the margin – left and width properties to a similar value.

You can also make the use of pixels width in place of a percentage. For example, in order to restrict your navigation bar column to 200 pixels, change each of the 20% values to 200 pixels instead. The use of pixels is appropriate if you have an image (like the logo) which you would like to place in the side column and you do not want the column to be narrower than the image.

2.    Putting The Navigation Bar On The Right

The code mentioned above puts the navigation menu in the left column. If you wish to put the navigation menu on the right had side like it is placed in the blogs, change the code to the following:

#content {

margin-right: 20% ;

}

#navbar {

float: right ;

width: 20% ;

}

Again, change ‘20%’ to an appropriate value for your website.

The CSS Code For A 2-Column Website With The Use Of Fixed Layout

Although a relative width layout is preferred by most of the website owners, the downfalls of this type of layout are also becoming more prominent as a result of the huge monitor resolutions. For example, if your visitor uses a monitor display that is over 2000 pixels horizontally, the paragraphs present in your content will be reduced to single lines and they will be displayed in a big white space. This takes place when the width is wide and the entire paragraph can fit in one line.

As a result of this, some webmasters prefer to fix the width of the window to a reasonable value, like 800 pixels or 1024 pixels. In order to use this kind of fixed layout for your website, it is important to set a width for the block that contains both the columns. This is where the empty container DIV that you created earlier becomes useful.

The following CSS code creates a web page with a fixed width of 800 pixels:

#container {

width: 800px ;

}

#content {

margin-left:  200px;

}

#navbar {

float: left;

width: 200px;

}

However, if you implement the code mentioned above and your website appears in a browser window that is wider than 800 pixels, you will notice that both your columns will be pushed to the left side of the window. This leaves a large volume of white space on the right hand side of the screen. In such a case, it is crucial to have both of your columns to be centered in the browser window.

The standard-compliant method of centering a block is mentioned below:

#container {

width: 800px ;

margin-left: auto ;

margin-right: auto ;

}

In order to make this code work in IE 6 and 7, it is important to have a valid Document Type Definition (DTD) or DOCTYPE for your web page. This will avoid triggering the IE 6 / 7’s backward compatibility mode. For instance, the HTML 4.01 transitional DTD is mentioned below:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

The left and the right margins are set to ‘auto’. As a result of this, the standard-compliant browsers provide both of them with equal value and this results in effectively centering the block.

With the CSS code mentioned above, you can efficiently create a 2-clumn website!

Ujwala

I am a passionate writer. Presentation of information in an interesting way is something I do the best. I write on various topics related to social media, search engine optimization, web hosting, mobile website and marketing and some great interesting stuff.

You may also like...

Leave a Reply

Your email address will not be published.