Home » HTML

HTML Div Element

By IncludeHelp Last updated : October 23, 2024

The HTML <div> tag defines a section (division) on a webpage, and it is used as a container element where other HTML elements can be placed.

Default <div>

The <div> element by default takes maximum width, i.e., it takes up all available width of its parent.

Example

Here, we are specifying the background color with the <div> tag so that you can easily identify the div on the webpage.

<div style="background-color: yellow;">This is a div tag.</div>

Result

Use <div> to Group Other Elements

The <div> can also be used as a container tag to place other elements.

Example

<div style="background-color: #ffffc5;">
  <h4>This is a heading.</h4>
  <p>This is a paragraph.</p>
  <p>Here's a list:</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

Result

Styling <div>

You can apply different CSS rules to style the <div> tag as per your requirement. Write a CSS class, apply CSS rules, and use the class attribute with the <div> tag to apply the CSS.

Example

In this example, we are using the following CSS properties to style a <div>:

• width
• height
• padding
• background-color
• color

.ExDiv{
  width: 300px;
  height: 200px;
  background-color: #f40;
  color: #fff;
  padding: 8px;
}

Use the following HTML code to display a styled div:

<div class="ExDiv">
  Write anything here. <br/>
  You can also put multiple elements here.
</div>

Result

Center Aligned <div>

You can display <div> center-aligned in its parent element. To make a <div> center aligned, define the margin property as auto.

Example

.ExDiv{
  width: 300px;
  height: 200px;
  background-color: #f40;
  color: #fff;
  padding: 8px;
  margin: auto;
}

Use the following HTML code to display center-aligned div:

<div class="ExDiv">
  This is center-aligned div. <br/>
  We used "margin: auto" to make it center-aligned.
</div>

Result

Multiple Sections Using Different <div> Elements

You can create different sections on the webpage using multiple <div> elements. You can also give them different styles using various CSS properties.

Example

In the following example, we are creating three different sections on the webpage:

div{
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid #006969;
}
.style1{
  background-color: #ffffc5;
}
.style2{
  background-color: #e382ee;
}
.style3{
  background-color: #d3d3d3;
}

Use the following HTML code to display multiple div elements:

<div class="style1">
  <h4>About</h4>
  <p>IncludeHelp is a free learning portal for all.</p>
</div>
<div class="style2">
  <h4>Contact</h4>
  <p>Here you can put contact information.</p>
</div>
<div class="style3">
  <h4>Thanks</h4>
  <p>Thanks for reading our tutorials.</p>
</div>

Result

Further Improvements

You can apply different styles to different classes .style1, .style2, and .style3. To make the common changes in all divs, you can apply the style to the div{} element.

Aligning Divs Side by Side

Yoo can align multiple <div> elements side by side. It is useful when you want to create and display different sections together side by side.

To align divs side by side, you need to set the width property in percentage so that divs can be responsive and float to the left.

Also put an extra <div> element and set clear property to both to control the flow next to floated elements.

Example

div{
  width: 33%;
  float: left;
}

Use the following HTML code to display side by side aligned divs:

<div class="style1">
</div>

<div class="style2">
</div>

<div class="style3">
</div>

<div style="clear: both;"></div>

Result