JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="floated">
  <ul class="absolutely_positioned">
    <li class="floated"></li>
    <li class="floated"></li>
    <li class="floated"></li>
  </ul>
</div>

<div class="float_with_floats">
  <div class="float_inside_floats">
  </div>
  <div class="float_inside_floats">
  </div>
  <div class="float_inside_floats">
  </div>
</div>

CSS

/*reset*/

body,html, ul, li{
  margin: 0; padding: 0;
  list-style-type: none;
}





/*floated parents force inner absolutely positioned boxes' 
inner floats to occupy the minimal space possible,
even though absolutely positioned boxes,
aren't part of the flow;

Notice that .floated background does not even appear 
beneath the .absolutely positioneds rgba transaprent
background.
*/


.floated{
  float: left; /*try turning on float*/
  position: relative;
  height: 500px;
  background-color: #ddd;
}

.floated ul{
  padding: 0;
  position: absolute;
  background-color: rgba(0,0,0,0.2);
}

.floated li{
  padding: 0;
  float: left;
  height: 20px; width: 70px;
  margin-left: 30px;
  background-color: rgba(111,200,22,0.5);
}

.below{
    height: 90px; width: 90px;
    background-color: rgba(111,200,22,0.5);
}




/*floats with floating children (a comparison)*/

.float_with_floats{
  float: right;
  height: 100px;
  background-color: olive; 
}

.float_inside_floats{
  float: right;
  height: 20px; width: 70px;
}

.float_inside_floats:nth-child(odd){
  background-color: grey;
}

.float_inside_floats:nth-child(even){
  background-color: purple;
}

JavaScript

/*floated parents force inner absolutely positioned boxes' 
inner floats to occupy the minimal space possible,
even though absolutely positioned boxes,
aren't part of the flow;*/