HTML Div Element
The <div> element is used as a container for other HTML elements.
The <div> Element
By default a <div> is a block element, so it takes the full available width and has line breaks before and after it. It has no required attributes, but style, class, and id are common.
Example
A <div> taking up the full width, breaking the surrounding text onto separate lines.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Width</title>
</head>
<body>
<p>Lorem Ipsum <div>I am a div</div> dolor sit amet.</p>
</body>
</html>
<div> as a container
The <div> element is often used to group a section of a page together.
Example
A <div> grouping a heading and paragraphs.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Container</title>
</head>
<body>
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
</body>
</html>
Center align a <div> element
If a <div> is not 100% wide and you want to center it, set the CSS margin property to auto.
Example
A centered <div>.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 300px;
margin: auto;
}
</style>
</head>
<body>
<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>
</body>
</html>
Multiple <div> elements
You can have many <div> containers on the same page.
Example
Three <div> containers stacked on the page.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Multiple</title>
</head>
<body>
<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>
</body>
</html>
Aligning <div> elements side by side
When building pages, you often want two or more <div> elements side by side. There are several methods, all using some CSS. The most common are float, inline-block, flex, and grid.
Float
The CSS float property was not originally meant for laying out <div> elements side by side, but it has been used that way for years. It positions and formats content, letting elements sit horizontally instead of vertically.
Example
Three divs placed side by side with float.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycontainer {
width: 100%;
overflow: auto;
}
.mycontainer div {
width: 33%;
float: left;
}
</style>
</head>
<body>
<div class="mycontainer">
<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>
</div>
</body>
</html>
Inline-block
If you change a <div>'s display property from block to inline-block, the divs no longer add line breaks before and after, so they sit side by side instead of stacked.
Example
Three divs side by side with display: inline-block.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 30%;
display: inline-block;
}
</style>
</head>
<body>
<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>
</body>
</html>
Flex
The CSS Flexbox layout module makes it easier to build flexible, responsive layouts without floats or positioning. To use it, wrap the <div> elements in another <div> and make it a flex container.
Example
Three divs side by side with flexbox.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width: 33%;
}
</style>
</head>
<body>
<div class="mycontainer">
<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>
</div>
</body>
</html>
Grid
The CSS Grid layout module gives a grid-based system of rows and columns, making layouts easier without floats or positioning. It is similar to flex but can define more than one row and position each one. Wrap the <div> elements in a grid container and set the width of each column.
Example
Three divs side by side with CSS grid.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
</head>
<body>
<div class="grid-container">
<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>
</div>
</body>
</html>