Loading lesson path
Concept visual
Start at both ends
<div> element is used as a container for other HTML elements.
Formula
The < div > Element<div> element is by default a block element, meaning that it takes all available width, and comes with line breaks before and after.
Formula
A < div > element takes up all available width:
Lorem Ipsum < div > I am a div </div >dolor sit amet.
I am a div dolor sit amet.
<div> element has no required attributes, but style, class and id are common.
Formula
< div > as a container<div> element is often used to group sections of a web page together.
Formula
A < div > element with HTML elements:<div>
Formula
< h2 > London </h2 >
< p > London is the capital city of England.</p >
< p > London has over 9 million inhabitants.</p ></div>
London is the capital city of England. London has over 9 million inhabitants.
Formula
Center align a < div > element<div>
Formula
element that is not 100% wide, and you want to center - align it, set the CSSmargin property to auto.
<style>
div {
width:300px;
margin:auto;
}</style>
London is the capital city of England. London has over 9 million inhabitants.
Formula
Multiple < div > elements<div> containers on the same page.
<div>
Formula
< h2 > London </h2 >
< p > London is the capital city of England.</p >
< p > London has over 9 million inhabitants.</p ></div> <div>
Formula
< h2 > Oslo </h2 >
< p > Oslo is the capital city ofNorway.</p>
Formula
< p > Oslo has over 700,000 inhabitants.</p ></div> <div>
Formula
< h2 > Rome </h2 >
< p > Rome is the capital city ofItaly.</p>
Formula
< p > Rome has over 4 million inhabitants.</p ></div>
London is the capital city of England. London has over 9 million inhabitants.
Oslo is the capital city of Norway. Oslo has over 700,000 inhabitants.
Rome is the capital city of Italy. Rome has over 4 million inhabitants.
Formula
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 is the capital city of England. London has over 9 million inhabitants.
Oslo is the capital city of Norway. Oslo has over 700,000 inhabitants.
Rome is the capital city of Italy. Rome has over 4 million inhabitants. There are different methods for aligning elements side by side, all include some CSS styling. We will look at the most common methods: