Div 3 Columns Layout using CSS Styles - Div layout 3

Third type of Div 3 columns layout using CSS styles can be created by just moving the pair of sidebars from right to the left side of content container div overlay element. From the previous two types of Div 3 columns layout we learnt the div layouts using CSS styles. We designed two types of div layouts by just changing the positions of Div overlay tags in the HTML code. In first type of Div 3 columns layout we placed the sidebars at the left and right side of content container and in second type of Div 3 columns layouts we arranged the sidebars at the right side of the content container div tag. But here we will set the position of sidebars at the left side of the content container div tag. In this layout rest of the design elements such as header, footer and top navigation are at same positions like in previous div layouts. Let’s learn third 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 right 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 1st and 2nd */
/* div columns in this div layout design */
/* both are placed at the left side of */
/* content container */
#sidebar1, #sidebar2 {
    width: 180px;
    height: 400px;
    background-color: orange;
    margin: 2px 2px 2px 0px;
    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="sidebar1">
        Column 1
    </div>
    <div id="sidebar2">
        Column 2
    </div>
    <div id="content-container">
        Content
    </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 above HTML code 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 adds a logical line break between HTML elements.