The div Element in HTML

Multiple instances of the <div> element

The inclusion of multiple <div> elements within a single HTML document is permissible and frequently employed.

Example

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 9 million inhabitants.</p>
</div>

<div>
  <h2>Oslo</h2>
  <p>Oslo is the capital city of Norway.</p>
  <p>Oslo has over 700,000 inhabitants.</p>
</div>

<div>
  <h2>Rome</h2>
  <p>Rome is the capital city of Italy.</p>
  <p>Rome has over 4 million inhabitants.</p>
</div>

Result

Positioning <div> elements side-by-side.

Many webpage designs incorporate multiple horizontally aligned <div> elements.

Float

Although it was not designed with the intention of aligning <div> components side-by-side, the CSS float property has been used for this purpose for many years.

In order to position and format material, the CSS float property enables elements to be positioned horizontally instead of vertically.

Employing the CSS float property to achieve horizontal adjacency of div elements.

Example

<style>
.mycontainer {
  width:100%;
  overflow:auto;
}
.mycontainer div {
  width:33%;
  float:left;
}
</style>

Result

The inline-block display model

The <div> elements will no longer add a line break before and after if you change their display property from block to inline-block. Instead of being placed on top of one another, they will instead be presented side by side.

Employing the display: inline-block; CSS property to achieve horizontal adjacency of div elements.

Example

<style>
div {
  width: 30%;
  display: inline-block;
}
</style>

Result

Flex

In order to facilitate the creation of adaptable responsive layout structures without the need for float or positioning, the CSS Flexbox Layout Module was created. Enclose the <div> elements with another <div> element and set its status to flex container in order to enable the CSS flex technique.

Example

<style>
.mycontainer {
  display: flex;
}
.mycontainer > div {
  width:33%;
}
</style>

Result

Grid

By providing a grid-based layout system with rows and columns, the CSS Grid Layout Module simplifies web page creation by eliminating the need for positioning and floats.

Though it can define many rows and position each row independently, it sounds nearly identical to flex.

The CSS grid approach requires you to define the width of each column, surround the <div> components with another <div> element, and set the status as a grid container.

Example

Creating horizontal <div> layouts using Grid.

<style>
.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}
</style>

Result