Div 3 Columns Layout using CSS Styles - Div layout 2

In the previous tutorial we created first type of div 3 columns layout using CSS styles. Here we will rearrange the div overlays to design the second type of Div 3 columns layout. In the previous type of Div 3 columns layout we placed the sidebars separately, one sidebar at the left side of the content container and the other sidebar at the right side of the content container. In this second type of Div 3 columns layout we will place the sidebars together at the right side of the content container by just moving the code for sidebar div tags below the content container div element in the HTML code. Rest of the design elements such as header, footer and top navigation are same like previous div layouts. Let’s learn second type of 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;
    font-family: arial;
    font-size: 140%;
    color: #fff;
}

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

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

/* sidebar1 and sidebar2 are 2nd and 3rd */
/* div columns in this div layout design */
/* both are placed at the right side of */
/* content container */
#sidebar1, #sidebar2 {
    width: 180px;
    height: 400px;
    background-color: orange;
    margin: 2px 0px 2px 2px;
    float: left;
}

/* CSS Rule to override the above styles */
/* for sidebar2 */
#sidebar2 {
    background-color: yellow;
    color: black;
}

/* 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="content-container">
        Content
    </div>
    <div id="sidebar1">
        Column 1
    </div>
    <div id="sidebar2">
        Column 2
    </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 3 using CSS styles. Type 3, div 3 columns layout can be designed easily by rearranging the sidebars that we designed in this tutorial.