Right align out the Float Property

Question

.header {
  display: flex
}

.logo,
.contribute,
.class 1,
.class 2 {
  display: inline-block;
  margin: auto 0;
}

<header class="header">
  <div class="logo">
  </div>
  <nav </nav>
    <div class="contribute">
    </div>
    <div class="class 1">
    </div>
    <div class="class 2">
    </div>
</header>

In this suppose .header has display: flex; set.

.logo, .contributor, .class 1, .class 2 has display: inline-block; set and are child to parent .header class, which is flex.

How can we make sure that the .class 1 and .class 2 are right aligned without using the flow property?

where is css code? share it please. – Ehsan Jun 26 '17 at 09:00 — Ehsan, Jun 26 '17 at 09:00

Gerard · Accepted Answer · 2017-06-26T09:14:54.570

1

Use margin-left: auto; for class1

div,
nav {
  display: inline-block;
}

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

<header class="header">
  <div class="left">
    <div class="logo">1</div>
    <nav></nav>
  </div>
  <div class="contribute">2</div>
  <div class="right">
    <div class="class1">3</div>
    <div class="class2">4</div>
  </div>
</header>

edited Jun 26 '17 at 09:14

answered Jun 26 '17 at 09:04

Gerard

15,418
5
30
52

Code is updated. But you need to bundle the elements on the right and left. – Gerard Jun 26 '17 at 09:14
I am a nw comer if you think that this question was good then please motivate me by upvoting. Thanks! – WordCent Jun 26 '17 at 09:24
1

There is no need to bundle anything – Asons Jun 26 '17 at 09:36
@AdiYogi You've been a _new comer_ for 7 months now :) .. so time to stop asking users all the time to upvote your questions. They usually do if they find it _upvoteable_ – Asons Jun 26 '17 at 10:01

Asons · Answer 2 · 2017-06-26T09:56:53.560

Simply add margin-left: auto; to .class1 and it will push itself and .class2 to the right

I fixed your class names as CSS isn't happy with a class name of only one digit, like the 1 in class 1, so either remove the space (which I did in below sample) or add i.e. nr (nr1). Also, as the items in a flex container is flex items, the display: inline-block will have no effect.

.header {
  display: flex
}

.class1 {
  margin-left: auto;
}

<header class="header">
  <div class="logo">
  logo
  </div>
  <nav>
  </nav>
  <div class="contribute">contribute
  </div>
  <div class="class1">class 1
  </div>
  <div class="class2">class 2
  </div>
</header>

Right align out the Float Property

2 Answers2

Linked