HTML Div
Other HTML elements are contained within the <div> (HTML Div)element.
The < div > Element
By default, the <div> element is a block element, utilizing all available width and including line breaks before and after.
Example
A <div> element takes up all available width:
Loremm Ipsumm <div>I am a div</div> dolor sit amet.
Result
Loremm Ipsumm
I am a div
dolor sit amet.
The <div> element has no required attributes, but style, class and id are common.
< div > as a container
A web page’s sections are frequently grouped together using the <div> element.
Example
A <div> element with HTML elements:
<div>
<h2>Paris</h2>
<p>Paris is the capital city of France.</p>
<p>Franch has over 13 million inhabitants.</p>
</div>
Result
London
London is the capital city of England.
London has over 13 million inhabitants.
Center align a < div > element
Set the CSS margin property to auto if you wish to center-align a <div> element that is not 100% wide.
Example
<style>
div {
width:300px;
margin:auto;
}
</style>
Result
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
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
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
There are several approaches of aligning elements side by side, and they’re all based on CSS styling. We’ll examine the most popular techniques:
Float
Although aligning <div> elements side by side was not the intended intent of the CSS float property, it has been used for this purpose for many years.
Elements can float next to one another rather than on top of one another when using the CSS float property for content formatting and positioning.
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
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Inline-block
The <div> elements will be arranged side by side rather than on top of one another and will no longer add a line break before and after if you alter the <div> element’s display property from block to inline-block.
Example
How to use display: inline-block to align div elements side by side:
<style>
div {
width: 30%;
display: inline-block;
}
</style>
Result
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Flex
In order to facilitate the creation of flexible, responsive layout structures without the need for float or positioning, the CSS Flexbox Layout Module was created.
The <div> elements must be surrounded by another <div> element and designated as a flex container in order for the CSS flex method to function.
Example
How to use flex to align div elements side by side:
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
Result
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Grid
Designing web pages is made easier by the CSS Grid Layout Module, which provides a grid-based layout system with rows and columns in place of floats and positioning.
Although it sounds almost exactly like flex, it can define many rows and position each row independently.
In order to use the CSS grid approach, you must define the width of each column and encircle the <div> elements with another <div> element, designating the status as a grid container.
Example
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
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
HTML Tags
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
HTML div
container
block element
align
center
side by side
float
inline-block
flex
grid
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
The HTML
element is a fundamental building block in web development, serving as a versatile container for organizing and structuring content on a webpage. As you dive into your HTML course, understanding the power and flexibility of the
tag is crucial for crafting visually appealing and semantically meaningful websites.
At its core, the
element is a block-level container that can hold a variety of content, from text and images to other HTML elements. By strategically placing and aligning these
containers, you can create complex layouts and achieve desired visual effects, such as centering content, arranging elements side by side, or even implementing advanced layout techniques like floating and flexbox.
Mastering the
element will equip you with the skills to take control of your webpage’s structure and design. Whether you need to align elements, create multi-column layouts, or leverage the power of CSS positioning, the humble
tag is your go-to tool for achieving your design goals.
As you progress through your HTML course, be sure to explore the various techniques and best practices for working with
elements. From understanding the differences between block and inline-block display to leveraging the flexibility of CSS grid, your knowledge of the
tag will become a cornerstone of your web development expertise.
The HTML
element is a versatile and essential tool in web development. As a container element, it allows you to group and structure content on your web pages, making it a fundamental building block of HTML.
One of the primary uses of the
element is to create a container for other HTML elements. This container can then be styled and positioned using CSS, enabling you to align, center, or arrange content in various layouts, such as side-by-side or floating elements.
The
element is a block-level element, meaning it takes up the full width of its parent container by default. This makes it easy to create sections, headers, footers, and other structural components on a web page. Additionally, you can use CSS properties like “float” or “inline-block” to position
elements next to each other, creating more complex layouts.
For more advanced layout techniques, modern CSS features like Flexbox and Grid provide powerful tools for controlling the positioning and alignment of
elements. These methods offer greater flexibility and control over the layout of your web content, making them essential skills for any web developer to master.
In summary, the HTML
element is a versatile and indispensable tool for web developers. By understanding its capabilities and how to effectively use it in conjunction with CSS, you can create visually appealing and well-structured web pages that provide an optimal user experience.
