Technically HTML DIV is nothing than an empty container but it’s collaboration with CSS makes it as foundation of web-page.
On the behalf of web-page layout HTML DIV element plays a very important role. When we need to divide a web-page in different section to design a magnificent layout then HTML DIV becomes most important part for achieving this.
Just look this web-page you can see navigation bar and logo which can be called as header section, in left side there is a side-menu and in middle all tutorial content and below is a footer section, how these are being arranged in a proper way. The answer of question is HTML DIV with CSS. So try to learn HTML DIV in deep because it is most important element for creating web page stricture.
HTML DIV Syntax
<div>Hi, this is html div element syntax</div>
Points about HTML DIV
- IT is an empty container which can contains a group of HTML elements.
- By Default the width of HTML DIV is 100% of its parent element which contains the HTML DIV element but we can set desired with using width property of CSS.
- Default height is 0px, we can set its height as we want.
- A HTML DIV can contain other DIV element.
- It is a block level element means it can contain other element.
HTML DIV Attributes
HTML DIV supports max number of HTML Attributes either they are global attribute or can be local attribute but basically we use 2 HTML DIV attribute in grate amount that are id and class.
ID and Class Attribute in DIV
<head>
<style type=" text/css" >
#div_1{
height:152px;
background-color:brown;
color:white;
}
.my_div{
width:202px;
height:180px;
background-color:green;
color:white;
margin-top:20px;
}
</style>
</head>
<body>
<div id="div_1"><p>Hello! I'm first div element and what about you?</p></div>
<div class="my_div"><p>This is div2, look at me, I'm soo beautiful </p></div>
</body>
Result
Hello! I'm first div element and what about you?
This is div 2, look at me, I'm soo beautiful
Web Page Layout using HTML DIV
We can construct a web page as we wants using div with CSS. We are going to take a basic example of this HTML Tutorial web page, see below image.
In above example we have designed whole web page using 5 HTML DIV element, which will contains
- DIV 1 : it will contains all content of header section which can be logo, main navigation bar, login links etc.
- DIV 2 : We have used this of side nav.
- DIV 3 : within this DIV we will write our main content of web-page.
- DIV 4 : In this DIV we can put links of advertise or other links according to requirement.
- DIV 5 : We are using this DIV for footer content, which can contains some link, address information or some copy-right information.
Use of Float to Adjust DIV
Note : In a web page when we will use HTML DIV element then they will comes one after one, not side by side. To manage them side by side we have to know about CSS Position and CSS Float. So if you want to design a proper web-page layout then try to understand CSS position and float and try to do more practice with HTML DIV because it is compulsory for professional designing. Below we are listing a demo example you will get some help how to do it.
Use of float to adjust HTML DIV
<head>
<style type=" text/css" >
.my_div1{
width:30%;
height:240px;
background-color:blue;
color:white;
float:left;
}
.my_div2{
width:60%;
height:240px;
background-color:gold;
color:white;
float:right;
}
</style>
</head>
<body>
<div class="my_div1"><p>Hey.... I'm div one, I'm floating left</p></div>
<div class="my_div2"><p>Its me div two, floating right</p></div>
</body>
Result
Hey.... I'm div one, I'm floating left
Its me div two, floating right