HTML <div> Tag

The <div> tag is an empty container, which defines a division or a section. It has no effect on the content or layout, and is used to group HTML elements to be styled with CSS or manipulated with scripts.

We recommend to use <div> tag only when no other semantic elements introduced in HTML5 (such as <nav> , <main> or <article>) are appropriate.

The <div> tag is a block-level element, so a line break is placed before and after it.

You can place any HTML element within the <div> tag, including another <div>.

The <div> tag can NOT be inside <p> tag, because the paragraph will be broken at the point, where the <div> tag is entered.

To apply styles inside a paragraph use <span> tag, which is used with inline elements.

Syntax

The <div> tag comes in pairs. The content must be written between opening (<div>) and closing (</div>) tags.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The &lt;div&gt; Tag</title>
  </head>
  <body>
    <h1> The &lt;div&gt; Tag </h1>
    <div style="background-color:#8ebf42">
      <p>We use the &lt;div&gt; tag to group two paragraphs for applying background to the text, and to add color to this
        <span style="color:#1c87c9">word</span> we place it within &lt;span&gt; tag.</p>
      <p> Pay attention, that the &lt;div&gt; tag is a block-level element, so a line break is placed before and after
        it.</p>
    </div>
  </body>
</html>

Result


Positioning Blocks Defined by <div> Tag

When we build layouts we deal with multiple blocks defined by the <div> tag. Positioning of these blocks is at the heart of layout: placing elements in the correct relative positions across all screen sizes is one of the most important tasks.

Depending on the content and the goals of the page we can use different techniques (or their combinations) to determine the place of each block. Let’s learn more about these techniques.

Flexbox

In modern websites float-based layouts are being replaced with Flexbox. The main idea behind Flexbox is that with it you can control alignment, direction, order, and size of the items inside container.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        align-items: center; /* Use another value to see the result */
        width: 100%;
        height: 200px;
        background-color: #1faadb;
      }
      .flex-container > div {
        width: 25%;
        height: 60px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Result


CSS Float property

CSS float property, or "floats" allows elements to appear next to, or apart from, one another, which lets us create different types of layouts, including multi-column pages, sidebars, grids, etc.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .content {
        overflow: auto;
        border: 3px solid #666;
      }
      .content div {
        padding: 10px;
      }
      .content a {
        color: darkblue;
      }
      .blue {
        float: right;
        width: 45%;
        background-color: #1faadb;
      }
      .green {
        float: left;
        width: 35%;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="blue">
        <p>This is some paragraph inside div tag.</p>
        <a href="#">This is some hyperlink inside div tag.</a>
        <ul>
          <li>List item 1</li>
          <li>List item 2</li>
        </ul>
      </div>
      <div class="green">
        <p>This is some paragraph inside div tag.</p>
        <ol>
          <li>List item 1</li>
          <li>List item 2</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Result


Negative Margins

Negative margins can be applied to both static or floated elements.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .content div {
        padding: 2%;
      }
      .content a {
        color: darkblue;
      }
      .main-content {
        width: 30%;
        margin-left: 32%;
      }
      .blue {
        width: 25%;
        margin-top: -10%;
        background-color: #1faadb;
      }
      .green {
        width: 20%;
        margin: -35% auto auto 70%;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="main-content">
        <a href="#">This is some hyperlink inside div tag.</a>
      </div>
      <div class="blue">
        <p>This is some paragraph inside div tag.</p>
        <a href="#">This is some hyperlink inside div tag.</a>
        <ul>
          <li>List item 1</li>
          <li>List item 2</li>
        </ul>
      </div>
      <div class="green">
        <p>This is some paragraph inside div tag.</p>
        <ol>
          <li>List item 1</li>
          <li>List item 2</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Result


Relative+absolute positioning

If you want to position div relative to particular element you can use a combination of position: relative and position: absolute.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .content { 
        position: relative; 
        height: 400px;
        border: 1px solid #666;
      }
      .content div { 
        position: absolute; 
        width: 35%; 
        padding: 10px; 
      }
      .blue { 
        right: 20px;
        bottom: 0;
        background-color: #1faadb; 
      }
      .green { 
        top: 10px; 
        left: 15px; 
        background-color: #8ebf42; 
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="blue">
        <p>This is some paragraph inside div tag.</p>
      </div>
      <div class="green">
        <p>This is some paragraph inside div tag.</p>
      </div>
    </div>
  </body>
</html>

Result


position: relative does not affect the positioning of elements in normal flow unless you add offsets.

Attributes

Attribute Value Description
align left
right
center
justify
Was used to align the content inside a <div> tag.
This attribute is not supported in HTML5. CSS text-align property is used instead.

The <div> tag also supports the Global attributes and the Event Attributes.

Browser support