HTML

<div> defines a division in a HTML document.

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>
Try it Now »

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;
}
Try it Now »

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>    
Try it Now »

Click on the "Try it Now" button to see how it works.