How we can put two divisions
side by side in HTML?

The <div> tag defines the division of the HTML document. This tag is mainly used to group similar content together for easy styling. It is also used as the container for the HTML elements, we can easily style this tag using the class or id attribute. We can place content inside the <div> tag.

Using CSS property, we can place two <div> tags side by side in HTML.

By styling we can place the two division classes side by side.

Syntax

Following is the syntax for the <div> tag.

<div class='division'>Content…</div>

Example 1

Following is the example to place two division classes side by side in HTML using CSS property.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .division {
         display: inline-block;
         border: 1px solid red;
         padding: 1rem 1rem;
   </style>
</head>
<body>
   <!--<div class='parent'>-->
   <div class='division'>div tag 1</div>
   <div class='division'>div tag 2</div>
   <!--</div>-->
</body>
</html>

Following is the output for the above example program.

Example 2

In another example to add two <div> tags side by side, we are using CSS properties to style it by setting the height as 100px and a margin using set_margin −

<!DOCTYPE html>
<html>
<head>
   <title>HTML div</title>
</head>
<body>
   <div style="width: 100px; float:left; height:100px; background:gray; margin:10px">
      First DIV
   </div>
   <div style="width: 100px; float:left; height:100px; background:yellow; margin:10px">
      Second DIV
   </div>
</body>
</html>

Adding Parent <div> Tag

We can also add a parent to place two division classes. Here the parent <div> tag acts as the container for the child classes (HTML elements).

We can also style our parent <div> using CSS property.

Syntax

Following is the syntax for the parent <div> tag which contains two child <div> tags.

<div class='parent'>
   <div class='division'>Content…</div>
   <div class='division'>Content…</div>
</div>

Example 1

Given below is an example to place two <div> tags side by side in HTML and in this program we used a parent class to add more style in the HTML document.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .parent {
         border: 1rem solid green;
         margin: 1rem;
         padding: 1rem 1rem;
         text-align: center;
      }
      .division {
         display: inline-block;
         border: 1px solid aquamarine;
         padding: 1rem 1rem;
      }
   </style>
</head>
<body>
   <div class='parent'>
      <div class='division'>div tag 1</div>
      <div class='division'>div tag 2</div>
   </div>
</body>
</html>

Following is the output for the above example program.

Example − By creating a Split Screen

Given below is an example to place two div tags side by side, by splitting the screen in half.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .split {
         height: 100%;
         width: 50%;
         position: fixed;
         top: 0;
      }
      .left {
         left: 0;
         background-color: yellowgreen;
      }
      .right {
         right: 0;
         background-color: aquamarine;
      }
   </style>
</head>
<body>
   <div class="split left">
   </div>
   <div class="split right">
   </div>
</body>
</html>

Following is the output for the above example program.

Updated on: 19-Oct-2022

8K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements