Top community members
All Questions Ask Question

In the past we had a dream,
to have place where we could share IT knowledge,
to ask questions without fear that someone will judge us.

Now we are a group of people who make this dream come true. ❤ 💻

If you think sharing knowledge and helping other is valuable.

join our community - Click here

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
Root-ssh
Now
Add comment

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more