justify grid css

index.html

<div class="fluegrid look">
  <div style="width:40%">flexible</div>
  <div style="width:20%">grid</div>
  <div style="25%">css</div>
  <div style="15%">hack</div>
</div>

Justified-divs,-attempt-4.markdown

Justified divs, attempt 4

A Pen by Max Dolgov on CodePen.

License.

style.css

/* normalize  */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}




.fluegrid {
  width: 100%;
  text-align: justify;
  clear: both;
  font-size: 0;
  font-size: 12px\9; /* IE6-9 only hack */
}

.fluegrid > div{  
  display: inline-block;
  font-size: 12px;
  zoom: 1;
  *display: inline;
}

.fluegrid:after{
  content: "";
  width: 100%;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.look { 
  width: 100%;
  margin: 10px 0 0 0;
  background: #ccc;
  padding: 5px'
  
}
.look div { 
  background: white;
  font-size: 12px;
}  

/*****************************/

/* Only to see effect better */
.fluegrid div { 
  outline: 1px dashed #888;
  padding: 5px;
}