Div is not right justified

Question

I want the text of the second and third divs to be on the right. I tried that by using margin-left: auto and setting all divs to display: inline-block. It didn't work with float: left either. What have I done wrong?

It should look like this

.header > div {
  display: inline-block;
}

.right-justified{
  margin-left: auto;
  width: auto;
}

<section class="header">
      <div>
        <div>Left</div>
        <div>Left</div>
      </div>
        <div class="right-justified">
          <div>Right</div>
          <div>Right</div>
        </div>
        <div>
          <div>Right</div>
        </div>
    </section>

score 1 · Accepted Answer · answered Jul 13 '21 at 09:07

You should use flexbox or grid for better layout design to become a great developer rather than using this silly techniques.

try out the code Below--

.header{
    display: flex;
    justify-content: space-between;
  }
  
.right-justified{
    display: flex;

}
.mid{
    align-self: center;
    margin:0 1rem;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>template</title>
  </head>

  <body>
    <section class="header">
      <div>
        <div>Left</div>
        <div>Left</div>
      </div>
      <div  class="right-justified">
        <div>
          <div>Right</div>
          <div>Right</div>
        </div>
        <div class="mid">
          <div>Right</div>
        </div>
      </div>
    </section>
  </body>
</html>

@software don't forget to add your stylesheet properly. – Gulshan Aggarwal Jul 13 '21 at 09:08 — Gulshan Aggarwal, Jul 13 '21 at 09:08
I hope this will help you! – Gulshan Aggarwal Jul 13 '21 at 09:08 — Gulshan Aggarwal, Jul 13 '21 at 09:08

score 0 · Answer 2 · answered Jul 13 '21 at 08:57

You can simply add flex on the .header and margin-left: auto on the .right-justified

.header {
  display: flex;
}

.right-justified {
  margin-left: auto;
}

<section class="header">
  <div>
    <div>Left</div>
    <div>Left</div>
  </div>
  <div class="right-justified">
    <div>Right</div>
    <div>Right</div>
  </div>
  <div>
    <div>Right</div>
  </div>
</section>

n1kkou · Answer 3 · 2021-07-13T09:05:57.213

First, give your HTML structure specific class names and the just float the items as you desire. You can, furthermore, align the text inside the columns as you wish.

<section class="header">
  <div class="header-col-left">
    <div>Left</div>
    <div>Left</div>
  </div>
  <div class="header-col-right">
    <div>
      <div>col 1 right</div>
      <div>col 1 right</div>
    </div>
    <div>col 2 right</div>
  </div>
</section>

.header-col-left {
  float: left;
}
.header-col-right {
  float :right;
}
.header-col-right > div {
  float: left;
}

score 0 · Answer 4 · answered Jul 13 '21 at 08:58

Use can use display: flex and align-items:center to get the vertical alignment you are looking for.

.header {
  display: flex;
  align-items:center;
}

.right-justified {
  margin-left: auto;
}

<section class="header">
  <div>
    <div>Left</div>
    <div>Left</div>
  </div>
  <div class="right-justified">
    <div>Right</div>
    <div>Right</div>
  </div>
  <div>
    <div>Right</div>
  </div>
</section>

Div is not right justified

4 Answers4