HTML Div Element
The <div> Element
The <div> element is often used as a container for other HTML elements.
By default, the <div> element is a
block-level element, meaning that it always start on a new line, and occupies the full width of its container.
Example
A <div> element takes up full width:
Lorem Ipsum <div>I am a div</div>
dolor sit amet.
Result
Try it Yourself »
The <div> element has no required attributes, but style, class and id are common.
Use <div> as a Container
The <div> element is often used to group sections of a web page together.
Example
A <div> element as a container for HTML elements:
<div>
<h2>London</h2>
<p>London is the capital city of England. It is
the most populous city in the United Kingdom.</p>
</div>
Result
London
London is the capital city of England. It is the most populous city in the United Kingdom.
Try it Yourself »
Center-align a <div> Element
If you have defined a specific width for a <div> element, and you want to center-align it, set the CSS
margin property to
auto.
Example
<style>
div {
width:300px;
margin:auto;
}
</style>
Result
London
London is the capital city of England.
It is the most populous city in the United Kingdom.
Try it Yourself »
Multiple <div> Elements
You can have many <div> containers on the same page.
Example
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of
Norway.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of
Italy.</p>
</div>
Result
London
London is the capital city of England.
Oslo
Oslo is the capital city of Norway.
Rome
Rome is the capital city of Italy.
Try it Yourself »
Align <div> Elements Side by Side
When building web pages, you often want to have two or more
<div> elements side by side, like this:
London
London is the capital city of England.
Oslo
Oslo is the capital city of Norway.
Rome
Rome is the capital city of Italy.
There are different methods for aligning elements side by side, all include some CSS styling. We will look at the most common methods:
Using CSS Flexbox
Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way.
A flexbox always consists of:
- A flex container - The parent (div) element, where the display property is set to flex or inline-flex
- One or more flex items - The direct children (divs) of the flex container automatically becomes flex items
Example
How to use flexbox to align div elements side by side:
<style>
.container {
display: flex;
}
.container
div {
width: 33%;
}
</style>
<div
class="container">
<div><h2>London</h2><p>London is...</p></div>
<div><h2>Oslo</h2><p>Oslo is...</p></div>
<div><h2>Rome</h2><p>Rome
is...</p></div>
</div>
Result
London
London is the capital city of England.
Oslo
Oslo is the capital city of Norway.
Rome
Rome is the capital city of Italy.
Try it Yourself »
Learn more about flexbox in our CSS flexbox tutorial!
Using CSS Grid
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easy to design a responsive layout structure. Sounds almost the same as flex, but it has the ability to define more than one row and position each row individually.
A grid always consists of:
- A grid container - The parent (div) element, where the display property is set to grid or inline-grid
- One or more grid items - The direct children (divs) of the grid container automatically becomes grid items
Example
How to use grid to align <div> elements side by side:
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
</style>
<div
class="container">
<div><h2>London</h2><p>London is...</p></div>
<div><h2>Oslo</h2><p>Oslo is...</p></div>
<div><h2>Rome</h2><p>Rome
is...</p></div>
</div>
Result
London
London is the capital city of England.
Oslo
Oslo is the capital city of Norway.
Rome
Rome is the capital city of Italy.
Try it Yourself »
Learn more about grid in our CSS grid tutorial.
HTML Tags
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
For a complete list of all available HTML tags, visit our HTML Tag Reference.
