Fluid width spacing of divs


/ Published in: CSS
Save to your folder(s)

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


Copy this code and paste it in your HTML
  1. // HTML ->
  2.  
  3. <div id="container">
  4. <div class="box1"></div>
  5. <div class="box2"></div>
  6. <div class="box3"></div>
  7. <div class="box4"></div>
  8. <span class="stretch"></span>
  9. </div>
  10.  
  11. // CSS ->
  12.  
  13. #container {
  14. border: 2px dashed #444;
  15. height: 125px;
  16.  
  17. text-align: justify;
  18. -ms-text-justify: distribute-all-lines;
  19. text-justify: distribute-all-lines;
  20.  
  21. /* just for demo */
  22. min-width: 612px;
  23. }
  24.  
  25. .box1, .box2, .box3, .box4 {
  26. width: 150px;
  27. height: 125px;
  28. vertical-align: top;
  29. display: inline-block;
  30. *display: inline;
  31. zoom: 1
  32. }
  33. .stretch {
  34. width: 100%;
  35. display: inline-block;
  36. font-size: 0;
  37. line-height: 0
  38. }
  39.  
  40. /* just for demo */
  41. .box1, .box3 {
  42. background: #ccc
  43. }
  44. .box2, .box4 {
  45. background: #0ff
  46. }

URL: http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.