CSS - Two Column Layout


In this tutorial we are going to design a two column layout. Our web page will include one header, two columns and one footer.

HTML Document

We are using <div> tags to develop the layout. Below is an image of the layout which we are designing through CSS.

Two Column Layout with CSS
Two div tags are needed for the left and right column and two for header and footer. We start with an empty html body structure and add four div elements.

<!DOCTYPE html>
<html>
    <head>
        <title>Two Column CSS Layout</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="header">
            Header
        </div>
        <div id="column1">
            Column1
        </div>
        <div id="column2">
            Column2
        </div>
        <div id="footer">
            Footer
        </div>
    </body>
</html>

CSS Stylesheet

Create a style.css file and add the following code:

#header{
    background-color:blue;
}
#column1{
    background-color:yellow;
}
#column2{
    background-color:green;
}
#footer{
    background-color:red;
}

In the code snippet given above we have used background-color properties. Below is the output of the code developed so far.

To define a size for our containers we use the width and height CSS properties. Add the following CSS to define the size for header and footer.

#header{
    background-color:blue;
    width:960px;
    height:300px;
}

#footer{
    background-color:red;
    width:960px;
    height:200px;
}

We have defined width to be 960px and height 300px for header and 200px for footer. For column1 and column2 container we need to divide width into two parts. We add more CSS properties to style our two column layouts.

#column1 {
    background-color:yellow;
    width:400px;
    height:400px;
    float:left;
}
#column2 {
    background-color:green;
    width:500px;
    margin-left:460px;
    height:400px;
}

Float left is used to push the first column to the left side and reflow the second column to the right side in the same row. Complete your style.css by specifying width and height according to your requirement.

Complete CSS Style Code

#header {
    background-color:blue;
    width:960px;
    height:150px;
}
#column1 {
    background-color:yellow;
    width:400px;
    height:400px;
    float:left;
}
#column2 {
    background-color:green;
    width:500px;
    margin-left:460px;
    height:400px;
}
#footer {
    background-color:red;
    width:960px;
    height:100px;
}

Now we have successfully designed the 2 column layout using HTML and CSS. You can customize further depending upon your need.