HTML Div
HTML
<div> defines a division in a HTML document.
The div (division) element is a generic block-level container used to group and organize other HTML elements or content within a web page.
HTML Division
➔ HTML <div> is a division or a section or a container in the <body>.
➔ This is a general purpose container for all other elements.
➔ The <div> can be nested itself at any level.
➔ Other elements can contain <div> in any numbers.
➔ div does not inherently carry any semantic meaning, such as header, nav, or article, etc.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Two Div
Two Div elements horizontally.
Example
<!DOCTYPE html>
<html>
<!-- Example: div element -->
<head>
<title>HTML div tag example</title>
<style>
.d1 {
border: 1px solid black;
border-radius: 5px;
background-color: #dff5f8;
color: rgb(223, 52, 0);
padding: 5px;
margin-top: 10px;
}
.d2 {
border: 1px solid rgb(19, 18, 18);
border-radius: 5px;
background-color: #c0c0c0;
color: rgb(8, 4, 0);
padding: 5px;
margin-top: 10px;
}
</style>
</head>
<body>
<p>HTML div tag example</p>
<h1>Choosing a discussion</h1>
<div class="d1">
<section>
<h2>Introduction</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s</p>
</section>
</div>
<div class="d2">
<section>
<h2>Criteria</h2>
<p>When an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</section>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Two Div
Two Div elements side by side.
Example
<!DOCTYPE html>
<html>
<!-- Example: div element -->
<head>
<title>HTML div tag example</title>
<style>
* {
box-sizing: border-box;
}
.d1 {
border: 1px solid black;
border-radius: 5px;
background-color: #dff5f8;
color: rgb(223, 52, 0);
padding: 5px;
margin: 10px;
width: 40%;
height: 180px;
float: left;
}
.d2 {
border: 1px solid rgb(19, 18, 18);
border-radius: 5px;
background-color: #c0c0c0;
color: rgb(8, 4, 0);
padding: 5px;
margin: 10px;
width: 40%;
height: 180px;
float: left;
}
</style>
</head>
<body>
<p>HTML div tag example</p>
<h1>Choosing a discussion</h1>
<div class="d1">
<section>
<h2>Introduction</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s</p>
</section>
</div>
<div class="d2">
<section>
<h2>Criteria</h2>
<p>When an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</section>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Three div
Three div elements side by side.
Example
<!DOCTYPE html>
<html>
<!-- Example: div element -->
<head>
<title>HTML div tag example</title>
<style>
* {
box-sizing: border-box;
}
.d1 {
border: 1px solid black;
border-radius: 5px;
background-color: #dff5f8;
color: rgb(223, 52, 0);
padding: 5px;
margin: 10px;
width: 40%;
height: 180px;
float: left;
}
.d2,.d3 {
border: 1px solid rgb(19, 18, 18);
border-radius: 5px;
background-color: #c0c0c0;
color: rgb(8, 4, 0);
padding: 5px;
margin: 10px;
width: 25%;
height: 180px;
float: left;
}
</style>
</head>
<body>
<p>HTML div tag example</p>
<h1>Choosing a discussion</h1>
<div class="d1">
<section>
<h2>Introduction</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s</p>
</section>
</div>
<div class="d2">
<section>
<h2>Criteria</h2>
<p>When an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</section>
</div>
<div class="d3">
<section>
<h2>Criteria2</h2>
<p>When an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</section>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.