Languages

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

6 points
Asked by:
Kate_C
2892

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
2892

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
2892

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
Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.