EN
How to align 2 div tags into left and right without using float?
2
answers
6
points
I always use float: left and float: right to solve this problem.
Is there a way to solve this in another way?
My code:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.div-left { border: 2px solid grey; margin: 15px; padding: 15px; }
.div-right { border: 2px solid grey; margin: 15px; padding: 15px; }
</style>
</head>
<body>
<div class="div-left" >Hello 1</div>
<div class="div-right">Hello 2</div>
</body>
</html>
This code produce:
How can I get div 1 to left and div 2 to right without using floats?
Example what I want to achieve:
2 answers
8
points
The best solutions is to use flex.
Put those 2 div's into another div and add to this outer div display flex and justify-content, like this:
<div style="display: flex; justify-content: space-between;">
Full working example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.div-left { border: 2px solid grey; margin: 15px; padding: 15px; }
.div-right { border: 2px solid grey; margin: 15px; padding: 15px; }
</style>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div class="div-left" >Hello 1</div>
<div class="div-right">Hello 2</div>
</div>
</body>
</html>
If we want to have width of those divs like on your desired example, add width: 100% to both divs.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.div-left { border: 2px solid grey; margin: 15px; padding: 15px; width: 100%; }
.div-right { border: 2px solid grey; margin: 15px; padding: 15px; width: 100%; }
</style>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div class="div-left" >Hello 1</div>
<div class="div-right">Hello 2</div>
</div>
</body>
</html>
Note, both classes are the same so we can use only one of them and remove second one. But I understand it is only for better picturing the problem.
0 comments
Add comment
7
points
Use display: inline-block with width: calc(50% - 70px).
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.div-left {
margin: 15px;
padding: 15px;
border: 2px solid grey;
width: calc(50% - 70px);
display: inline-block;
}
.div-right {
margin: 15px;
padding: 15px;
border: 2px solid grey;
width: calc(50% - 70px);
display: inline-block;
}
</style>
</head>
<body>
<div class="div-left" >Hello 1</div>
<div class="div-right">Hello 2</div>
</body>
</html>
1 comments
calc(...) is not supported by older browsers so I do not recommend this approach