/ Published in: CSS
Space div elements evenly inside a wrapper without using float (no right spacing issue) so that all elements are flush to the edges.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
// HTML -> <div id="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <span class="stretch"></span> </div> // 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 }
URL: http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs