Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How we can put three divisions side by side in HTML?
The <div> tag defines a division or section in an HTML document. This tag is mainly used to group similar content together for easy styling and also serves as a container for other HTML elements. There are multiple CSS techniques to place three divisions side by side in HTML.
Syntax
Following is the basic syntax for the <div> tag −
<div class="division">Content...</div>
Method 1 − Using display: inline-block
The display: inline-block property allows elements to sit side by side while maintaining block-level properties like width and height. This is one of the simplest methods to arrange divs horizontally.
Example
Following example places three division elements side by side using display: inline-block −
<!DOCTYPE html>
<html>
<head>
<title>Three Divs Side by Side - Inline Block</title>
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem;
text-align: center;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem;
width: 150px;
background-color: #f0f8ff;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="parent">
<div class="division">Division 1</div>
<div class="division">Division 2</div>
<div class="division">Division 3</div>
</div>
</body>
</html>
The output shows three divisions placed horizontally within a green bordered container −
[Division 1] [Division 2] [Division 3] (Three light blue boxes side by side within a green border)
Method 2 − Using CSS float Property
The float property removes elements from the normal document flow and positions them to the left or right of their container. This is a traditional method for creating horizontal layouts.
Example
Following example demonstrates using the float property to arrange three divs side by side −
<!DOCTYPE html>
<html>
<head>
<title>Three Divs Side by Side - Float</title>
<style>
.container {
overflow: hidden;
padding: 10px;
}
.float-div {
width: 120px;
float: left;
height: 100px;
margin: 10px;
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
}
.first { background: #666; }
.second { background: #ffcc00; color: black; }
.third { background: #cc0000; }
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
<div class="float-div first">First DIV</div>
<div class="float-div second">Second DIV</div>
<div class="float-div third">Third DIV</div>
</div>
</body>
</html>
The output displays three colored boxes arranged horizontally using float −
[First DIV] [Second DIV] [Third DIV] (Gray box) (Yellow box) (Red box)
Method 3 − Using CSS Flexbox
Flexbox is the modern CSS layout method that provides flexible and responsive alignment of elements. It offers better control over spacing and alignment compared to float or inline-block.
Example
Following example uses CSS Flexbox to create three side-by-side divisions −
<!DOCTYPE html>
<html>
<head>
<title>Three Divs Side by Side - Flexbox</title>
<style>
.flex-container {
display: flex;
gap: 15px;
padding: 20px;
background-color: #f5f5f5;
}
.flex-item {
flex: 1;
padding: 20px;
text-align: center;
border: 2px solid #333;
border-radius: 8px;
}
.item1 { background-color: #e8f5e8; }
.item2 { background-color: #e8e8f5; }
.item3 { background-color: #f5e8e8; }
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="flex-container">
<div class="flex-item item1">Flex Item 1</div>
<div class="flex-item item2">Flex Item 2</div>
<div class="flex-item item3">Flex Item 3</div>
</div>
</body>
</html>
The flexbox layout creates three equal-width divisions with proper spacing −
[Flex Item 1] [Flex Item 2] [Flex Item 3] (Light green) (Light blue) (Light pink)
Comparison of Methods
Following table compares the three methods for placing divs side by side −
| Method | Pros | Cons | Best Use Case |
|---|---|---|---|
| Inline-block | Simple, good browser support, maintains block properties | Whitespace issues, limited layout control | Simple horizontal arrangements with fixed widths |
| Float | Traditional method, widely supported | Removes elements from flow, requires clearfix, complex layouts | Legacy browser support, newspaper-style layouts |
| Flexbox | Modern, flexible, responsive, easy alignment control | Limited support in very old browsers | Modern web development, responsive designs |
Key Points
-
Inline-block is suitable for simple layouts but may have spacing issues between elements.
-
Float is the traditional method but requires careful handling of the document flow.
-
Flexbox is the recommended modern approach for creating flexible and responsive layouts.
-
Always consider the container element when arranging child divs side by side.
-
For responsive designs, flexbox provides the best control over element behavior across different screen sizes.
Conclusion
There are multiple ways to place three divisions side by side in HTML using CSS. While traditional methods like float and inline-block work well, modern CSS Flexbox provides the most flexible and maintainable solution for horizontal layouts. Choose the method that best fits your project's browser support requirements and design complexity.
11K+ Views
