Languages

How to align 2 div tags into left and right without using float?

6 points
Asked by:
Kate_C
19790

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
Answered by:
Kate_C
19790

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
Answered by:
Kate_C
19790

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
Root-ssh
calc(...) is not supported by older browsers so I do not recommend this approach
Add comment
Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join