A Tutorial on how to use the HTML <div> tag
A division is a section of a HTML page used to arrange your page. We use divisions to apply CSS properties to content within that division. Divisions can be nested. Nesting occurs in the HTML file not the CSS file. We declare our divisions in our CSS file, and then reference them in HTML. Any CSS added in a division declaration applies to any content within that HTML div tag.
Declaring the division in CSS
#pagecontainer
{
Width: 960;
Height: auto;
}
The above example creates a custom division called pagecontainer with a fixed width. The height will adjust to the content. This division could be used to setup the overall page dimension, and then nested divisions could reside in this one. All Visible content, should be organized into divisions, and these divisions should be referenced in the <body> section of your webpage. Divisions are displayed on a page one below the other. Therefore, divisions must be added to the HTML in a top-down approach.
Referencing division in HTML
<div Id=”pagecontainer”>
<div Id=”content”>
Content goes here
</div>
</div>
The above HTML assumes two divisions have been declared in the CSS just to show how the nesting could work.
The Float Property
At some point you will want to be able to place divisions side by side on the same line,instead of one underneath the other. This can be done by using the float property. The below example uses the float property to setup two black boxes, and display them side by side. If the box didn’t have the float left property, it would instead stack them one on-top of the other. This is because adding the float property floats the division on the current line therefore, in this example both boxes stay on the current line.
CSS Code
#box
{
Width: 200;
Height: 200;
background-color: black;
margin: 200px;
float:left;
}
HTML Code
<html>
<head>
<title>My Website</title>
<LINK REL=StyleSheet HREF=”site.css” TYPE=”text/css”>
</head>
<body>
<div id=”box”>
</div>
<div id=”box”>
</div>
</body>
</html>
Div Example
[...] HTML Divisions (HTML / CSS tutorial) [...]