5/8/25, 11:30 AM HTML Div Tutorial
Tutorials Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS 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 »
https://www.w3schools.com/Html/html_div.asp 1/12
5/8/25, 11:30 AM HTML Div Tutorial
The <div> element has no required attributes, but style , class and id are common.
Tutorials Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
<div> as a container
The <div> element is often used to group sections of a web page together.
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 .
https://www.w3schools.com/Html/html_div.asp 2/12
5/8/25, 11:30 AM HTML Div Tutorial
Tutorials
Example
Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
<style>
div {
width:300px;
margin:auto;
}
</style>
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>
https://www.w3schools.com/Html/html_div.asp 3/12
5/8/25, 11:30 AM HTML Div Tutorial
<div>
<h2>Oslo</h2>
Tutorials Exercises Services Sign Up Log in
<p>Oslo is the capital city of Norway.</p>
HTML
CSS has
<p>Oslo JAVASCRIPT
over 700,000SQL PYTHON
inhabitants.</p> JAVA PHP HOW TO W3.CSS C
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has over 4 million inhabitants.</p>
</div>
Result
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
https://www.w3schools.com/Html/html_div.asp 4/12
5/8/25, 11:30 AM HTML Div Tutorial
When building web pages, you often want to have two or more <div> elements side by
Tutorials
side, like this:
Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
London Oslo Rome
London is the capital city Oslo is the capital city of Rome is the capital city of
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:
Float
The CSS float property was not originally meant to align <div> elements side-by-side,
but 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>
https://www.w3schools.com/Html/html_div.asp 5/12
5/8/25, 11:30 AM HTML Div Tutorial
ResultTutorials
Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
London Oslo Rome
London is the capital city Oslo is the capital city of Rome is the capital city of
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
If you change the <div> element's display property from block to inline-block ,
the <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
https://www.w3schools.com/Html/html_div.asp 6/12
5/8/25, 11:30 AM HTML Div Tutorial
Tutorials Exercises Services Sign Up Log in
HTML
London
CSS JAVASCRIPT Oslo
SQL PYTHON JAVA Rome
PHP HOW TO W3.CSS C
London is the capital Oslo is the capital city Rome is the capital city
city of England. of Norway. of Italy.
London has over 9 Oslo has over 700,000 Rome has over 4
million inhabitants. inhabitants. million 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.
Example
How to use flex to align div elements side by side:
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
Result
https://www.w3schools.com/Html/html_div.asp 7/12
5/8/25, 11:30 AM HTML Div Tutorial
Tutorials Exercises Services Sign Up Log in
HTML
London
CSS JAVASCRIPT SQL Oslo
PYTHON JAVA Rome
PHPHOW TO W3.CSS C
London is the capital city Oslo is the capital city of Rome is the capital city of
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.
Example
How to use grid to align <div> elements side by side:
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
https://www.w3schools.com/Html/html_div.asp 8/12
5/8/25, 11:30 AM HTML Div Tutorial
ResultTutorials
Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
London Oslo Rome
London is the capital city Oslo is the capital city of Rome is the capital city of
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.
?
Exercise
Consider the following code:
<div style='width:200px;margin:auto'>
<h2>London</h2>
</div>
How will the DIV element be aligned?
Left aligned
Center aligned
Right aligned
Submit Answer »
https://www.w3schools.com/Html/html_div.asp 9/12
5/8/25, 11:30 AM HTML Div Tutorial
Tutorials Exercises Services Sign Up Log in
HTML Tags
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
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.
❮ Previous Next ❯
Track your progress - it's free! Sign Up Log in
https://www.w3schools.com/Html/html_div.asp 10/12
5/8/25, 11:30 AM HTML Div Tutorial
COLOR PICKER
Tutorials Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
PLUS SPACES
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
https://www.w3schools.com/Html/html_div.asp 11/12
5/8/25, 11:30 AM HTML Div Tutorial
W3.CSS Reference
Tutorials Bootstrap Reference
Exercises
PHP Reference
Services Sign Up Log in
HTML Colors
HTML
CSS Java
JAVASCRIPT ReferenceSQL PYTHON JAVA PHP HOW TO W3.CSS C
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
W3Schools is optimized for learning and training. Examples might be simplified to improve
reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot
warrant full 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.
https://www.w3schools.com/Html/html_div.asp 12/12
