Div 3 Columns Layout using CSS Styles - Div layout 1

Updated on 16 Jan 2012,
Published on 04 May 2009

Div 3 columns layout using CSS styles is the next step to design the div based layouts if you are familiar with Div 2 column layouts using CSS. In the previous tutorials we designed 2 columns div layouts using CSS styles having difference of only left side navigation and right side navigation column. You can roughly create a 3 column div layout by merging both types of 2 column div layouts. This is an easiest way to understand the structure and arrangement of 3 column div layout. As all types of web pages have few common areas that we have discussed almost in each tutorial of div layouts such as header, footer and top navigation. In this tutorial we will split the main content section into 3 columns of div overlays as left sidebar, content container and right side bar. Let’s learn Div 3 Columns Layout using CSS styles with the help of an example.

3 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 middle column */
/* in this 3 columns div layout */
#content-container {
    width: 626px;
    height: 400px;
    background-color: green;
    margin: 2px 0px 2px 0px;
    float: left;
}

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

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

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

HTML Code for 3 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-sidebar">
        <h1>{ Left Sidebar }</h1>
    </div>
    <div id="content-container">
        <h1>{ Content }</h1>
    </div>
    <div id="right-sidebar">
        <h1>{ Right Sidebar }</h1>
    </div>
    <div style="clear: both">
    </div>

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

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

In the next tutorial we will learn how to create the Div 3 Columns Layout type 2 using CSS styles. Type 2, div 3 columns layout can be designed easily by rearranging the sidebars that we designed in this tutorial.

1 Responses to "Div 3 Columns Layout using CSS Styles - Div layout 1"
dwayne
Can someone help me set up an RSS feed combined with the ezine subscription form as seen on this site: http://www.just-easy-recipes.com/ I am new to Dreamweaver. Any help is appreciated. Thanks.
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email