- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Advertisements
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.