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 to place two divs next to each other in HTML?
A DIV tag is a division element in HTML used to group and separate content on web pages. It helps organize text, images, navigation bars, and other elements into distinct sections.
A <div> tag consists of an opening <div> and closing </div> tag. Both are required. DIV elements can be styled with CSS or manipulated with JavaScript using the class or id attributes.
Placing Two Divs Next to Each Other
By default, <div> elements are block-level and stack vertically. To place them side by side, we can use CSS properties like float, display: inline-block, or display: flex.
Syntax
Using float
.left-div {
float: left;
width: 50%;
}
.right-div {
float: left;
width: 50%;
}
The float: left property pushes each div to the left, placing them side by side. Both divs need a defined width so they fit within the parent container.
Using inline-block
.left-div, .right-div {
display: inline-block;
width: 49%;
}
Setting display: inline-block makes block elements sit on the same line. Width is kept slightly below 50% to account for whitespace between inline-block elements.
Using flexbox
.container {
display: flex;
}
.container div {
flex: 1;
}
Applying display: flex on the parent container automatically places child divs side by side. The flex: 1 property distributes equal width to each child.
Example: Using float
In this example, we use float: left to place two divs next to each other −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 16px;
}
.first { background-color: gray; color: white; }
.second { background-color: yellow; }
</style>
</head>
<body>
<div class="box first">First DIV</div>
<div class="box second">Second DIV</div>
</body>
</html>
Two divs appear side by side − one with a gray background and another with a yellow background.
Example: Using flexbox
In this example, we use display: flex on a parent container to arrange two divs side by side −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 10px;
}
.container div {
flex: 1;
padding: 20px;
border: 2px solid black;
text-align: center;
}
.left { background-color: pink; }
.right { background-color: lightgray; }
</style>
</head>
<body>
<div class="container">
<div class="left">
<h2>HTML5</h2>
<p>HTML5 is the latest version of Hyper Text Markup Language used to structure web pages.</p>
</div>
<div class="right">
<h2>CSS</h2>
<p>CSS stands for Cascading Style Sheets and controls how HTML elements are displayed on screen.</p>
</div>
</div>
</body>
</html>
Two equal-width divs appear side by side inside a flex container, each with different background colors and content.
Example: Using inline-block
In this example, we use display: inline-block to place two divs next to each other −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 45%;
padding: 15px;
text-align: center;
vertical-align: top;
}
.first { background-color: #e3f2fd; }
.second { background-color: #fff3e0; }
</style>
</head>
<body>
<div class="box first">First DIV (inline-block)</div>
<div class="box second">Second DIV (inline-block)</div>
</body>
</html>
Two divs sit on the same line using inline-block display. The vertical-align: top ensures they align at the top edge.
Comparison of Methods
| Method | CSS Property | Best For |
|---|---|---|
| Float | float: left |
Simple two-column layouts, legacy browser support |
| Inline-block | display: inline-block |
Inline positioning without float clearing |
| Flexbox | display: flex |
Modern layouts with equal height and spacing control |
Conclusion
There are three common CSS methods to place two divs side by side − float, inline-block, and flexbox. Among these, flexbox is the most recommended modern approach as it provides equal height columns, easy spacing with the gap property, and requires no clearfix hacks. Choose the method that best suits your project's browser support requirements.
50K+ Views
