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.
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
* {
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;
}
Click on the "Try it Now" button to see how it works.
Three div
Three div elements side by side.
Example
<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>
Click on the "Try it Now" button to see how it works.