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.
