<div> Webpage Layout

 

<div> tags are most commonly used to layout web pages. With the usage of <div> tags you can divide the web page in smaller sections, create rows and columns and place these sections exactly where you want.

 

Here is an example of a simple web page layouts:

 

<html>
<head><style type="text/css">

#box1 {width: 800px; height: 50px; background-color: #9F6;}
#box2 {width: 200px; height: 300px; background-color: #96C; float:left;}
#box3 {width: 600px; height: 300px; background-color: #0CF; float:right;}
#box4 {width: 800px; height: 25px; background-color: #F30; clear:both;}
#container {width: 800px;height: 675px;background-color: #FF9;
margin-right:auto;margin-left:auto;}

</style>

</head>

 

<body>
<div id="container">
<div id="box1"> Header </div>
<div id="box2"> Nav. Bar </div>
<div id="box3"> Body Content </div>
<div id="box4"> Copyright </div>
</div>

</body>

</html>

 

Header
Nav. Bar
Body Content
Copyright

 

 

 

Centering the Layout

 

In order to center the entire webpage, you need to put all the page elements inside a container <div>. Container <div> starts right after the <body> tag and ends before the </body> and contains all the elements within a webpage.

 

To center the container <div> do as following:

 

#container {

width: 800px;

height: 675px;

background-color: #FF9;
margin-right:auto;

margin-left:auto;

}

 

 

NOTE: you must define width for the container <div>

 

Creating Columns using Class

 

If you stack a few <div> tags and float them to the left, they will line up next to each other if there is room. You can use this concept to create columns with. To simplify the process, instead of creating multiple <div> tags with IDs, you can define a <div> class and float it to the left, then apply it as many times as you want. The following example shows you how to create three columns:

 

<html>
<head>
<style type="text/css">
.column {
float:left;
width: 110px;
height: 90px;
margin: 5px;

background-color: #31A2D9;
}
</style>
</head>
<body>

<div class="column">
</div>

<div class="column">
</div>

<div class="column">
</div>

<div class="column">
</div>

</body>
</html>

 

NOTE: Class Selector is a style that can be applied to multiple items. In the example above the .column is a Class that floats all <div> tags to the left.

 

 

<<    Previous Page                                                                    Next Page    >>