Himas Rafeek
Posted on: 2 years ago
CSS

Fluid width spacing of divs

Space div elements evenly inside a wrapper without using float (no right spacing issue) so that all elements are flush to the edges.


                                          // HTML -> 
 // CSS ->  #container { border: 2px dashed #444; height: 125px;   text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines;   /* just for demo */ min-width: 612px; }  .box1, .box2, .box3, .box4 { width: 150px; height: 125px; vertical-align: top; display: inline-block; *display: inline; zoom: 1; } .stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0; }  /* just for demo */.box1, .box3 { background: #ccc; } .box2, .box4 { background: #0ff; }