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.
Initially, the CSS float property wasn’t designed specifically for aligning <div> elements side by side, yet it has been employed for this purpose for numerous years.
The CSS float property serves for positioning and formatting content, enabling elements to float adjacent to each other rather than stacking atop one another.
Example
“Using the float property to align <div> elements side by side:”
| <style> .mycontainer { width:100%; overflow:auto; } .mycontainer div { width:33%; float:left; } </style> |
When you modify the display property of a <div> element from block to inline-block, it eliminates the line breaks before and after the <div> elements. Consequently, they are displayed adjacent to each other instead of stacked vertically.
Example
“Utilizing display: inline-block to align <div> elements side by side:”
| <style> div { width: 30%; display: inline-block; } </style> |
The CSS Flexbox Layout Module was introduced to simplify the creation of flexible and responsive layout structures without relying on float or positioning.
To implement the CSS flex method, enclose the <div> elements within another <div> element and designate it as a flex container.
Example
“Using flex to align <div> elements side by side:”
| <style> .mycontainer { display: flex; } .mycontainer > div { width:33%; } </style> |
The CSS Grid Layout Module provides a grid-oriented layout system featuring rows and columns, simplifying web page design without necessitating floats and positioning.
While similar to flex, the grid method offers the capability to define multiple rows and position each row independently.
To implement the CSS grid method, encapsulate the <div> elements within another <div> element designated as a grid container. Additionally, specify the width of each column.
Example
“How to align <div> elements side by side using grid:”
| <style> .grid-container { display: grid; grid-template-columns: 33% 33% 33%; } </style> |
