We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.


Posted By

localhorst on 03/15/08


Tagged

layout fluid


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

basicmagic


Equidistant Objects with CSS


Published in: CSS 


URL: http://css-tricks.com/equidistant-objects-with-css/

Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have. Here are the goals we are trying to achieve:

  1. <!--PASS: First on the left, float the rest right in equal size boxes
  2.  
  3. Fortunately the table idea sparked some thought. The first image needs to be left aligned, but all the rest of them could be right-aligned. In fact, if they are, and also inside of boxes that divide the rest of that space evenly, that might just do it. Perhaps this is best explained visually:
  4.  
  5. floatytechnqiue.png
  6. -->
  7.  
  8. HTML:
  9.  
  10. <img src="images/shape-red.png">
  11. <div id="movers-row">
  12. <div><img src="images/shape-green.png"></div>
  13. <div><img src="images/shape-yellow.png"></div>
  14. <div><img src="images/shape-blue.png"></div>
  15. </div>
  16.  
  17. CSS:
  18.  
  19. #movers-row {
  20. margin: -120px 0 0 120px;
  21. }
  22. #movers-row div {
  23. width: 33.3%;
  24. float: left;
  25. }
  26. #movers-row div img {
  27. float: right;
  28. }

Report this snippet 

You need to login to post a comment.