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.
<div style="width:500px;text-align:center;background-color:blue;">
The following are some important property about DIV element.
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:
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>
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 |
HTML Forms
HTML DECIMAL Color Code and HEX Color Code
HTML Nested Lists
Elements and Tags In HTML
4 Primary Tags In HTML
Create Your First Web Page in HTML
Attributes in HTML Tags
HTML DOCTYPE Declaration
HEAD Tag in HTML
Meta Tags in HTML
Body Tag in HTML
H1 to H6 HTML Elements
Basic HTML Elements
HTML Table Element
Basefont HTML Element
Formatting Element in HTML
Font Element In HTML
Style Element in HTML
CSS Properties
DIV in HTML Document
List in HTML
Creating Menus With HTML list
Creating Horizontal Menu With HTML list
HTML Image Tag
Hyperlinks In HTML