By default, the <div> element is a block-level element, thus occupying the entire available width and introducing line breaks before and after itself.
Example
A <div> element utilizes the entire width available.
| Lorem Ipsum <div>I am a div</div> dolor sit amet. |
| Lorem Ipsum
I am a div
dolor sit amet. |
While the <div> element doesn’t necessitate mandatory attributes, style, class, and id are frequently used.
The <div> element is commonly employed to organize sections of a web page into groups.
Example
A <div> element containing HTML elements:
| <div> <h2>London</h2> <p>London is the capital city of England.</p> <p>London has over 13 million inhabitants.</p> </div> |
To center-align a <div> element that isn’t 100% wide, apply the CSS margin property with the value of auto.
Example
| <style> div { width:300px; margin:auto; } </style> |
Multiple <div> containers can coexist on the same page.
Example
| <div> <h2>London</h2> <p>London is the capital city of England.</p> <p>London has over 13 million inhabitants.</p> </div> <div> <h2>Oslo</h2> <p>Oslo is the capital city of Norway.</p> <p>Oslo has over 600.000 inhabitants.</p> </div> <div> <h2>Rome</h2> <p>Rome is the capital city of Italy.</p> <p>Rome has almost 3 million inhabitants.</p> </div> |
When creating web pages, it’s common to arrange two or more <div> elements horizontally, as shown here:
When constructing web pages, it’s common to desire positioning two or more <div> elements adjacent to each other, such as this:
Various techniques exist for aligning elements side by side, all of which involve applying CSS styling. We’ll explore the most prevalent methods.