HTML DIV

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.

HTML DIV

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

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved