Tag Archives: div

DIV Basics Using CSS

Introduction

Divisions or “div” are a ‘block level element’, meaning they have the “block” attribute already inherited. Divs are used to display content in a block format much like tables but also used to define sections of a web page.

General Layout

Divs are the best way to layout information on a web page because of the properties that can be applied using the simplest and cleanliest code. It is always better to use divs over tables whenever possible.

The best way to organize a web page using divs is to create specific sections for each part of the page. For example: a header, navigation, content and footer. For each of the different sections, an ID can be used to identify and style each div. It is always better to have each section or div inside one main div, normally this div is called the “container”, this “container” div will allow for more options, which will be described later.

Below is how to organize the container and its inner sections or divs.

<div id="container">
<div id="header">Header Content</div>
<div id="navigation">Navigation Content</div>
<div id="content">Main Content</div>
<div id="footer">Footer Content</div>
</div>

Below is a picture of a box model of the four sections inside the container, which also shows the style that applied to each section.

Div Layout Model Using A Container

The example shows the navigation being used on the left hand side. You can set the “navigation” and “content” divs side-by-side using the “float” property. The “navigation” div will have the “float” property along with a specified width. The “content” div will have the “margin-left” property for the same value as the navigation width. Using the same value will allow the content to only flow to the right of the navigation.

Below is an example of the style applied to each section:

#header {
height:120px;
text-align:center;
}
#navigation{
width:150px;
float:left;
}
#content {
margin-left:150px;
}
#footer {
text-align:center;
}

Using a Container

By using a “container” div, you can set the width of the overall content. By not setting a “width” property, the content will fill the browser window-no matter what size. To set a maximum width for the overall content, you would do so by adding a “width” property to the container. The default alignment for the container is left, but you can also center the “container” div. You can see how to center the div below.

Centering

Unlike tables, divs do not have the “align” property, so you cannot center a div in the same way. The way to center a div element is to use the margin property. Below is how to absolutely center a div:

#container {
width:820px;
margin-left:auto;
margin-right:auto;
}

The value to use for the margin properties is “auto”. This will automatically calculate the distance from each side, left and right, and position the div in the center.

Links

You can also create a link from a div itself. Most of the time you will see this in the header, a link created from the header that points to the home page. This can be done with a bit of javascript. The easiest way to create a link from a div is below:

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

The only property that is applied, via css, is the “cursor” property, this is so the visitor knows the div is a link.