HTML Div Element

The <div> element is used as a container for other HTML elements.

The <div> Element

The primary purpose of the <div> element is to divide the HTML document into logical sections and create a structured layout.

It does not have any specific semantic meaning, and its use is often for organizational and styling purposes.

Example

   <div> I From Codelines</div>  Thank you for visit

You can click on above box to edit the code and run again.

Output

I From Codelines

Thank you for visit

<div> as a container

A <div> container, often referred to simply as a "div," is an HTML element used to group and structure other HTML elements on a webpage. The term "container" is used because a <div> typically contains and wraps around other content, providing a way to organize and style groups of elements together

Example

             
<div>
<p>India</p>
<p>India is the capital city of New Dehli</p>
<p>India has over 100 million inhabitants.</p>
</div>

You can click on above box to edit the code and run again.

Output

India

India is the capital city of New Dehli

India has over 100 million inhabitants.

Center align a <div> element

To center-align a <div> element horizontally on a webpage, you can use CSS. There are different methods to achieve this, and I'll provide you with a couple of common approaches:

Example

              
<style>
div {
  width:400px;
  margin:auto;
}

You can click on above box to edit the code and run again.

Output

India is the capital city of New Dehli

India has over 100 million inhabitants.

Multiple <div> elements

When we talk about multiple <div> elements, we are referring to using multiple instances of the <div> HTML element in a webpage. Each <div> serves as a container to group and organize specific sets of content or elements. Multiple <div> elements are commonly used to structure and layout the various components of a webpage.

Example

              
<div>
<p>India</p>
<p>India is the capital city of New Dehli</p>
<p>India has over 100 million inhabitants.</p>
</div>

<div>
<p>India</p>
<p>India is the capital city of New Dehli</p>
<p>India has over 100 million inhabitants.</p>
</div>

<div>
<p>India</p>
<p>India is the capital city of New Dehli</p>
<p>India has over 100 million inhabitants.</p>
</div>

You can click on above box to edit the code and run again.

Output

You can click on above box to edit the code and run again.

India

India is the capital city of New Dehli

India has over 100 million inhabitants.

Aligning <div> elements side by side

To align <div> elements side by side, you can use various CSS techniques. One common method is to use the CSS float property or the newer Flexbox layout. Here's an example for each:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem atque natus provident architecto nesciunt itaque ut asperiores eum consequatur beatae. Maxime architecto reprehenderit nihil saepe facere temporibus alias, quisquam ipsam.

Float

In HTML and CSS, the float property is used to define how an element should be positioned within its parent container in relation to the surrounding content. The float property is often used to create layouts where elements are placed side by side or floated to one side of their container

Example

              
              
<style>
.mycontainer {
  width:100%;
  overflow:auto;
}
.mycontainer div {
  width:33%;
  float:left;
}
<style>

You can click on above box to edit the code and run again.

Output

Lorem ipsum dolor sit amet

Inline-block

The inline-block value for the CSS display property is used to make an element behave as both an inline and a block-level element. This means the element flows inline with surrounding content, but it also respects the width and height properties like a block-level element. The inline-block value allows you to create elements that sit on the same line as their neighboring elements, but they can have a specified width and height.

Example

<style>
div {
  width: 30%;
  display: inline-block;
}
</style>

You can click on above box to edit the code and run again.