How we can put three 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 and also used as the container for the HTML elements.

We use CSS property to place three divisions <div> tags side by side in HTML. The CSS property float is used to achieve this.

Syntax

Following is the syntax for the <div> tag.

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

Example 1

Following is the example to place three 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>
      .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 class='division'>div tag 3</div>
   </div>
</body>
</html>

Following is the output for the above example program.

We change the style by using the CSS property and we can also override the style attributes.

Example 2

Another example to place three <div> tags side by side on a HTML page is as follows –

<!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>
   <div style="width: 100px; float:left; height:100px; background:red; margin:10px">
      Third DIV
   </div>
</body>
</html>

Example 3 − By creating a Split Screen

Following is the example to place three 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>
      .split {
         height: 100%;
         width: 50%;
         position: fixed;
         top: 0;
      }
      .left {
         left: 50%;
         background-color: yellowgreen;
      }
      .middle{
         background-color: blueviolet
      }
      .right {
         right: 25%;
         background-color: aquamarine;
      }
   </style>
</head>
<body>
   <div class="split left">
   </div>
      <div class="split middle"></div>
      <div class="split right">
   </div>
</body>
</html>

Following is the output for the above example program.

Updated on: 19-Oct-2022

7K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements