How to float elements independently?

Question

I would like to position some elements at different distances from the left border of a parent div. Each element holds its own distance (in percentage of the width of the parent div).

Since position does not seem to be the right approach, I tried to do that by floating the element to the right

div {
  display: flex;
  flex-direction: row;
}
#root {
  width: 50%;
  border: solid;
}
#one {
  float: right;
  margin-left: 20%;
}
#two {
  float: right;
  margin-left: 80%;
}

<div id="root">
  <div id="one">1</div>
  <div id="two">2</div>
</div>

My expectation was that the first element would be at 10% of the div width (so 5% of the page width, since the parent div is 50% width relative to the page) and the second one at 80%. This is not the case, the docs mention that

Elements after a floating element will flow around it.

They also mention that clear can be used to avoid this but I did not manage to make it happen (that is to make it so that each float is recalculated from the left border of the parent div).

Is this something which is possible?

As a workaround I thought about calculating the float of the second element reltive to the first one, but that would horrendously(*) complicate my code so maybe there is a cleaner solution.

(*) For the case above that would be 80% - 20% (the ones which are already floated) = 60%. But even here the positionning is not correct (the 2 is too much to the right; there should be 20% blank, 1, 40% blank, 2, 20% blank - but the widths of the numbers themselves should be taken into account as well)

div {
  display: flex;
  flex-direction: row;
}
#root {
  width: 50%;
  border: solid;
}
#one {
  float: right;
  margin-left: 20%;
}
#two {
  float: right;
  margin-left: 60%;
}

<div id="root">
  <div id="one">1</div>
  <div id="two">2</div>
</div>

Be aware that floats are ignored in a flex container. http://stackoverflow.com/q/39194630/3597276 — Michael Benjamin, Nov 11 '16 at 15:30
@Michael_B (and GermanoPlebani) - ah? I was not aware of that. So why are the digits moved to the right in my first code snippet? — WoJ, Nov 11 '16 at 15:32
@Michael_B: ah ok, thank you , now this is clear. I will rephrase my question to make it clear that I am looking to recalculate the margins from the left side of the parent div. — WoJ, Nov 11 '16 at 15:36

score 3 · Accepted Answer · answered Nov 11 '16 at 15:35

You can position element the way you want with position: absolute on the child elements. But keep in mind that the child elements don't control the height of the outer element.

#root {
  position: relative;
  border: solid;
  width: 50%;
  overflow:hidden;
  height: 20px;
}
#one {
  border: solid red;
  position: absolute;
  top: 0px;
  left: 20%;
}
#two {
  border: solid blue;
  position: absolute;
  top: 0px;
  left: 60%;
}

<div id="root">
  <div id="one">1</div>
  <div id="two">2</div>
</div>

Demo: https://jsfiddle.net/uu0oftyr/

Johannes · Answer 2 · 2016-11-11T15:55:26.383

Use

  clear: left;
  float: left;
  margin-left: [the percentage value for your distance];

Erase the flex settings from the container and add overflow: hidden to make sure the floats are considered part of the containers height.

Here is an example:

#root {
  width: 50%;
  border: solid;
  overflow: hidden;
}
#one {
  clear: left;
  float: left;
  margin-left: 20%;
  border: 1px solid red;
}
#two {
  clear: left;
  float: left;
  margin-left: 60%;
  border: 1px solid green;
}

<div id="root">
  <div id="one">1</div>
  <div id="two">2</div>
</div>

P.S.: You could do something similar with all right settings:

  clear: right;
  float: right;
  margin-right: [...];

How to float elements independently?

2 Answers2