Single Column Div Layout, Div Overlay using CSS Styles

The very first step to startup with Div Layout or Div overlays is creating a single column design having typically center aligned structure with the help of CSS styles. A Single column div layout contains basically four sections. Starting from header as the first section, horizontal navigation bar, main content section and then last is the footer. In this tutorial about Single column Div layout we will use CSS styles to arrange the HTML Div element to create the Div overlay of web page. Div element's id attribute and class attribute enable you to define their associated rules and styles in the style sheet to customize the look and feel as well as position of Div overlays.

CSS Style Rules provides the functionality to associate the id attribute of Div element and applies the CSS styles to a single Div because id attribute must have unique value on a single web page. Do not use same CSS Style Rules associated with Div id multiple times on a single web page. It could cause distorted Div overlay rendering on different web browsers. You can create CSS Style Class that can be used multiple times on single page. Basically CSS Style Rules are created to manage the Div overlays that generates the basic page structure for example header, navigation, content and footer. Other nested elements can be customized using CSS Style classes.

Single Column 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: #ffffff;
}

/* 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: 770px;
    margin: 0 auto;
}

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

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

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

/* content-container CSS Style Rule */
/* It will hold the main content of the page. */
#content-container {
    width: 770px;
    height: 400px;
    background-color: green;
    margin: 2px 0px 2px 0px;
}

HTML Code for Single Column 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">
        <h1>{ Content }</h1>
    </div>
    <div style="clear: both">
    </div>

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

You can include the above CSS styles in the head section of HTML page or use the external CSS style sheet by adding above CSS styles. To attach the external style sheet, first paste the CSS styles in a file having .css extension for example: styles.css. Then add the following line in the head section of HTML page:

<link href="styles.css" />

For adding the CSS styles directly you can use the style tag in the head section and paste the code between opening and closing style tag as follows:

<style type="text/css">
    /* add your styles here */
</style>

Above combination of CSS styles and HTML code 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.

Continue to next tutorial: Div 2 Columns Left Navigation Div Layout using CSS Styles to learn about 2 column div layout design.