float:right in the correct order it appears in HTML code

Question

I have a container div and two child divs both with the float: right property.

My code looks like:

<div class="container">               .container {width: 50%}
   <div class="a"></div>              .a, .b { float: right }
   <div class="b"></div>
</div>

Semantically, I should see [ [A][B]] on my page, but it shows up as [ [B][A]]

I get that I can just reorder my HTML and put B first if I want to see A first, but that's not really semantically correct. What's the proper way to do this?

Answer 1

You can use flexbox and justify-content: flex-end;

.container {
  background: #eee;
  width: 50%;
  display: flex;
  justify-content: flex-end;
}

<div class="container">               
   <div class="a">a</div>
   <div class="b">b</div>
</div>

Or set the child divs to display: inline-block; and use text-align on the container to align to the right.

.container {
  background: #eee;
  width: 50%;
  text-align: right;
}
.container > div {
  display: inline-block;
}

<div class="container">               
   <div class="a">a</div><div class="b">b</div>
</div>

And another solution would be to introduce a new element to wrap the child elements, float the new element right, then float the children left.

.container {
  background: #eee;
  width: 50%;
  text-align: right;
  overflow: auto;
}
.inner {
  float: right;
}
.inner > div {
  float: left;
}

<div class="container">
  <div class="inner">
    <div class="a">a</div>
    <div class="b">b</div>
  </div>
</div>