Div 2 Columns Left Navigation Div Layout using CSS Styles

In the previous tutorial we learnt the first step to create and design the single column Div based layout using CSS styles. Here in this tutorial we will discuss step by step how to create 2 column div layout using CSS styles. In the last tutorial we designed the center aligned layout using Div overlays containing header, top navigation, content overlay and last footer at the bottom of the page. Here we will implement the same CSS styles to start designing the 2 column div layout. We will add one header at the top, top navigation for main links, content overlay structure divided into 2 column div layout and last the footer at the page bottom. In the single column div layout we did not use the CSS float style to arrange the div overlays but here we will use CSS float Div styles to set the positions of left and right part of 2 columns div layout.

2 Columns Div Layout CSS Styles Code

/* html body tag style */
body {
    margin: 0px;
    padding: 0px;
}

/* h1 tag style */
h1 {
    margin: 0px;
    padding: 0px;
    font-family: arial;
    font-size: 140%;
    color: #fff;
}

/* CSS Style Rule for Div having id="outer-container" */
/* outer-container will hold the whole assembly of 
   nested div overlays. */
/* It will also center align the design */
#outer-container {
    width: 990px;
    margin: 0 auto;
}

/* footer CSS Style Rule */
#header {
    width: 990px;
    height: 90px;
    background-color: blue;
}

/* footer CSS Style Rule */
#footer {
    width: 990px;
    background-color: red;
}

/* content-container CSS Style Rule */
/* It will hold the main content of the page. */
/* it is the right side column */
/* in this 2 columns div layout */
#content-container {
    width: 730px;
    height: 400px;
    background-color: green;
    margin: 2px 0px 2px 0px;
    float: left;
}

/* left side navigation that is the left side column of */
/* 2 columns div layout */
#left-nav {
    width: 258px;
    height: 400px;
    background-color: navy;
    margin: 2px 2px 2px 0px;
    float: left;
}

/* Top navigation CSS Style Rule */
#top-Nav {
    width: 990px;
    background-color: black;
    margin: 2px 0px 0px 0px;
}

You can add the above CSS style code in the head section of your HTML page.

HTML Code for 2 Columns Div Layout

<div id="outer-container">
    <div id="header">
        <h1>{ Header }</h1>
    </div>
    <div style="clear: both">
    </div>

    <div id="top-Nav">
        <h1>{ Top Navigation }</h1>
    </div>
    <div style="clear: both">
    </div>

    <div id="left-nav">
        <h1>{ Left Side Navigation }</h1>
    </div>
    <div id="content-container">
        <h1>{ Content }</h1>
    </div>
    <div style="clear: both">
    </div>

    <div id="footer">
        <h1>{ Footer }</h1>
    </div>
</div>

Above CSS styles and HTML code for 2 columns Div layout will generate the following output:

Note: In the above HTML code for Div layout you can see that we have used Div tag with style=”clear : both”. You can learn about it from the previous tutorial: HTML Div CSS Clear Style. CSS clear style property works as a structure formatter for Div overlays that draws a logical line break between HTML elements. In the next tutorial we will learn how to create div 2 columns right navigation div layout using CSS styles. There is not a big difference between div 2 columns left navigation and right navigation div layouts but you will better understand with its example provided in the next tutorial.