In HTML, there are two types of element inline and block element.Inline elements can place element next to each other but they don't support height and width property by default and block elements support width and height property by default but we can't place block elements like two div side by side
So, here we can see How we can make it work
we will see how div can place next to each other in 5 different ways
- display: inline-block (tradional way)
- css flexbox method
- css grid method
- display: table method
- float property
Using display: inline-block
display: inline-block property helps to place block element beside each other
But, we need to add extra width property to the block element because block element by default takes 100% width
eg.
<!DOCTYPE html>
<head>
</head>
<body>
<div class="element">
</div>
<div class="element">
</div>
</body>
</html>// css
.element {
display: inline-block;
width: 100px;
height: 100px;
background: #ce8888;
}and output will be
please check example here
Using flexbox
flexbox is a modern way of designing the layout of webpage and flexbox is not a single property its complete module it has a number of feature
let's see how we can align divs next to each other using flexbox
//html file
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>
</html>// css file
.container {
display: flex;
}
.item {
background: #ce8888;
flex-basis: 100px;
height: 100px;
margin: 5px;
}//output
display: flex property given to container which makes child element in flex context and aligns divs next to each other
In the above example, You can see we have used flex-basis property which is used to give min-width for the item. To understand flexbox in detail please check this out
please find demo here
Using css grid
CSS grid is another great approach to design web page and it's complete module which comes with number of feature
Let's see how we can display divs side by side using css grid
//html
<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>
</html>//css file
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px;
grid-column-gap: 5px;
}
.item {
background: #ce8888;
}and output will be
property display: grid turns on the grid layout structure
In CSS file, grid-template-columns property helps to divide the page into number of columns, we have given 100px two times then it will create two columns
It's very big module, I think you should check it out first in detail then only go for using it.
Find demo here
Using display table
display: table property is an alternative for <table> tag
let's see how we can achieve dispaying div side by side using display: table property
//html file
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<div class="table-row">
<div class="table-cell">
</div>
<div class="table-cell">
</div>
</div>
</div>
</body>
</html>//css file
.container {
display: table;
width: 20%;
}
.table-row {
display: table-row;
height: 100px;
}
.table-cell {
border: 1px solid;
background: #ce8888;
display: table-cell;
padding: 2px;
}and output will be
please find demo here
you can code above display: table example using html table tag also like below
//html file
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<table class="container">
<tr class="table-row">
<td class="table-cell">
</td>
<td class="table-cell">
</td>
</tr>
</table>
</body>
</html>//css file
.container {
display: table;
width: 20%;
}
.table-row {
display: table-row;
height: 100px;
}
.table-cell {
border: 1px solid;
background: #ce8888;
display: table-cell;
padding: 2px;
}and output will be
Using float property
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow
let's see how we can display div side by side using float
//html file
<!DOCTYPE html>
<head>
</head>
<body>
<div class="element">
</div>
<div class="element">
</div>
</body>
</html>//css file
.element {
float: left;
width: 100px;
height: 100px;
background: #ce8888;
margin: 5px
}and output will be
Please find demo here
Conclusion:
There are number of ways to align divs next to each other but the question is which one is better
It's totally depend upon requirement
flexbox and CSS grid are modern ways of doing layout for webpage and it's a complete module and comes with a number of features.I recommend flexbox or CSS grid if need to layout the whole page
If you have minimal requirement then display: inline-block is perfect option.
Top comments (0)