DIV in HTML Document

What is DIV and How We Use DIV

The <div> element is a container block that divides the HTML page into different sections. like a table you can use div element to group together HTML elements and apply CSS styles to many elements at once. The div element is currently the most common method for identifying the structural sections of a document. you can place the div on proper position on the page using CSS instruction and you can set your page layout with few step.

For example :

<div>
-

-
</div>

<div >
<h1>Page heading</h1>
<p>Body content</p>
</div>

You can style your div with css properties either inline style attribute or external style sheet but external style sheet is recommended for batter performance.

Styling DIV with inline style sheet

<div style="width:500px;text-align:center;background-color:blue;">

The following are some important property about DIV element.

Display and visibility

The display property specifies that how an div element is displayed and visibility property specifies that div element visible or hidden. You can set display type inline, block , inline-block ,table , table-cell , table-column , table-row , none.

For example : display: inline

For example if we have Three div :

<div style="display:inline;width:200px;height:400px;border:2px solid red;">
this is first div
</div>

<div style="display:inline;width:200px;height:400px;border:2px solid red;">
this is second div
</div>

<div style="display:inline;width:200px;height:400px;border:2px solid red;">
this is third div
</div>

Then display : Inline ; make all three dim in one line as show in image below:

Div In HTML

Just change the Display : Block; and you can see the every div is look like sseperate block as shown in image below:

Now finely if you change Display : inline-block then both properties inline and block combine and all the dive display like column :

Div element make easy to maintain each and every block with single CSS file . and display each block on the proper position with float properties.

For example:

This is example create a webpage in table format with one header block and three column:

 

HTML File     test.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="mycss.css" media="screen"/>
</head>
<body>
<div id="header">
this is header
</div>
    <div id="main">
            <div id="content">
                <div id="left-content"">
                    This left column<br>
                    like a table Column
                    </div>
            <div id="centeral-content">
            This middle column<br>
            like a table Column
        </div>
        <div id="right-content">
        This right column<br>
        like a table Column
        </div>
</div>
</div>

</body>
</html>

 

Out Put Is :

You can also use some other important properties: 

float : Float is a CSS positioning property. you can place div  with the help of The float property.

syntax : float: none|left|right|initial|inherit;

color: Set text color of the div.

background-color: Set the background Color .

overflow: Specifies what happens if content overflows an element's box .

syntax:  overflow: visible|hidden|scroll|auto|initial|inherit;

padding: The padding CSS property sets the space on all sides of an element. The padding area is the space between the content of the element and the border of div element.

For example  : padding:10px 5px 15px 20px;

CSS file save as   mycss.css

 

#main
{
display: table;
width: 1024px;
margin-left: auto;
margin-right: auto;
border:2px solid;
float:none;

}

#content
{

width: 1024px;
display: table-row;
margin-left: auto;
margin-right: auto;
float:none;


}

#left-content
{
width: 200px;
display: table-cell;
background:red;
float:none;
border:2px solid;

}
#centeral-content
{
width: 600px;
display: table-cell;
background:green;
float:none;
border:2px solid;

}
#right-content
{
width: 200px;
display: table-cell;
background:yellow;
float:none;
border:2px solid;

}

#header
{

width: 1024px ;
background:blue;
height:150px;
float:center;
margin-left: auto;
margin-right: auto;

}