 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++

HTML Div Element

❮ Previous Next ❯

The <div> element is used as a container for other HTML elements.

The <div> Element

The <div> element is by default a block element, meaning that it takes all available width, and
comes with line breaks before and after.

Example
A <div> element takes up all available width:

Lorem Ipsum <div>I am a div</div> dolor sit amet.

Result

Lorem Ipsum
I am a div
dolor sit amet.

Try it Yourself »

The <div> element has no required attributes, but style , class and id are common.
<div>
 as a container
Tutorials Exercises  Services   Sign Up Log in

HTML CSS element

The <div> JAVASCRIPT SQL to group
is often used PYTHON JAVA
sections PHP
of a web page HOW TO
together. W3.CSS C C++

Example
A <div> element with HTML elements:

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

Result

London
London is the capital city of England.

London has over 9 million inhabitants.

Try it Yourself »

Center align a <div> element

If you have a <div> element that is not 100% wide, and you want to center-align it, set the
CSS margin property to auto .

Example
<style>
div {
width:300px;
 margin:auto;
 } Tutorials  Exercises  Services   Sign Up Log in
</style>
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++

Result

London
London is the capital city of England.

London has over 9 million

inhabitants.

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>
<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>
ResultTutorials 
 Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++

London
London is the capital city of England.

London has over 9 million inhabitants.

Oslo
Oslo is the capital city of Norway.

Oslo has over 700,000 inhabitants.

Rome
Rome is the capital city of Italy.

Rome has over 4 million inhabitants.

Try it Yourself »

Aligning <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 Oslo Rome

London is the capital city of Oslo is the capital city of Rome is the capital city of
England. Norway. Italy.

London has over 9 million Oslo has over 700,000 Rome has over 4 million
inhabitants. inhabitants. inhabitants.

There are different methods for aligning elements side by side, all include some CSS styling. We
will look at the most common methods:
FloatTutorials 
 Exercises  Services   Sign Up Log in

HTML CSSfloatJAVASCRIPT
The CSS property was SQL PYTHON
not originally meantJAVA
to align PHP HOW TO side-by-side,
<div> elements W3.CSS Cbut C++

has been used for this purpose for many years.

The CSS float property is used for positioning and formatting content and allows elements to
be positioned horizontally, rather than vertically.

Example
How to use float to align div elements side by side:

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

Result

London Oslo Rome

London is the capital city of Oslo is the capital city of Rome is the capital city of
England. Norway. Italy.

London has over 9 million Oslo has over 700,000 Rome has over 4 million
inhabitants. inhabitants. inhabitants.

Try it Yourself »

Learn more about float in our CSS float tutorial.

Inline-block
 Tutorials  Exercises  Services   Sign Up Log in

HTML CSS
If you change JAVASCRIPT
the SQL display
<div> element's PYTHON property
JAVA from
PHP
blockHOW TO W3.CSS, theC
to inline-block C++

<div> elements will no longer add a line break before and after, and will be displayed side by
side instead of on top of each other.

Example
How to use display: inline-block to align div elements side by side:

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

Result

London Oslo Rome

London is the capital city Oslo is the capital city of Rome is the capital city
of England. Norway. of Italy.

London has over 9 Oslo has over 700,000 Rome has over 4 million
million inhabitants. inhabitants. inhabitants.

Try it Yourself »

Flex
The CSS Flexbox Layout Module was introduced to make it easier to design flexible responsive
layout structure without using float or positioning.

To make the CSS flex method work, surround the <div> elements with another <div> element
and give it the status as a flex container.
 Tutorials 
Example
Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++
How to use flex to align div elements side by side:

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

Result

London Oslo Rome

London is the capital city of Oslo is the capital city of Rome is the capital city of
England. Norway. Italy.

London has over 9 million Oslo has over 700,000 Rome has over 4 million
inhabitants. inhabitants. inhabitants.

Try it Yourself »

Learn more about flex in our CSS flexbox tutorial.

Grid
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making
it easier to design web pages without having to use floats and positioning.

Sounds almost the same as flex, but has the ability to define more than one row and position
each row individually.

The CSS grid method requires that you surround the <div> elements with another <div>
element and give the status as a grid container, and you must specify the width of each column.
 Tutorials 
Example
Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++
How to use grid to align <div> elements side by side:

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

Result

London Oslo Rome

London is the capital city of Oslo is the capital city of Rome is the capital city of
England. Norway. Italy.

London has over 9 million Oslo has over 700,000 Rome has over 4 million
inhabitants. inhabitants. inhabitants.

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.
 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++
❮ Previous Next ❯

Track your progress - it's free! Sign Up Log in

ADVERTISEMENT
 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++

COLOR PICKER



ADVERTISEMENT

ADVERTISEMENT
 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS
 JAVASCRIPT
PLUS
SQL PYTHON
SPACES
JAVA PHP HOW TO W3.CSS C C++

GET CERTIFIED FOR TEACHERS

FOR BUSINESS CONTACT US

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples Get Certified

HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate

    
 FORUM ABOUT ACADEMY
 Tutorials  Exercises  Services   Sign Up
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and
Log in

learning.
HTML
 CSS
Tutorials, JAVASCRIPT SQL arePYTHON
references, and examples JAVA to avoid
constantly reviewed PHP errors,
HOW TO cannot
but we W3.CSS
warrant full C C++
correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie
and privacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.