{"id":577,"date":"2008-03-01T18:46:35","date_gmt":"2008-03-02T01:46:35","guid":{"rendered":"http:\/\/css-tricks.com\/equidistant-objects-with-css\/"},"modified":"2015-06-28T12:31:15","modified_gmt":"2015-06-28T19:31:15","slug":"equidistant-objects-with-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/equidistant-objects-with-css\/","title":{"rendered":"Equidistant Objects with CSS"},"content":{"rendered":"<p><a href=\"#the-solutions\">Just take me down to the solutions, please.<\/a><\/p>\n<p>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.<\/p>\n<p><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/equidistant.png' alt='equidistant.png' class=\"clear\" data-recalc-dims=\"1\"><\/p>\n<p>Here are the goals we are trying to achieve:<\/p>\n<ul>\n<li>The <em>left-most<\/em> object is <strong>left aligned<\/strong> with it&#8217;s parent element.<\/li>\n<li>The <em>right-most<\/em> object is <strong>right aligned<\/strong> with it&#8217;s parent element.<\/li>\n<li>Each object is <strong>equidistant<\/strong> from one another at all times.<\/li>\n<li>The objects will <strong>stop short of overlapping<\/strong> each other as the browser window narrows.<\/li>\n<li>The objects <strong>will not wrap<\/strong> down as the browser window narrows.<\/li>\n<li>The technique will work in a <strong>fluid width environment<\/strong>. Even one that is <strong>centered<\/strong>.<\/li>\n<\/ul>\n<p>I tried a number of different techniques to try and achieve this. Let&#8217;s go through all my failures and then to the final technique which seems to work pretty good.<\/p>\n<h3><span style=\"color: red;\">FAIL<\/span>: Give each object a percentage left position<\/h3>\n<p>First I gave each image a unique class:<\/p>\n<pre rel=\"HTML\" class=\"lang-html\"><code>&lt;img src=\"images\/shape-red.png\" class=\"first-r\"&gt;\r\n&lt;img src=\"images\/shape-green.png\" class=\"second-r\"&gt;\r\n&lt;img src=\"images\/shape-yellow.png\" class=\"third-r\"&gt;\r\n&lt;img src=\"images\/shape-blue.png\" class=\"fourth-r\"&gt;<\/code><\/pre>\n<p>Then I gave percentage-based left positioning to each of those classes:<\/p>\n<pre rel=\"CSS\" class=\"lang-css\"><code>img.first-r  { left: 0%; position: relative; }\r\nimg.second-r { left: 25%; position: relative; }\r\nimg.third-r  { left: 50%; position: relative; }\r\nimg.third-r  { left: 75%; position: relative; }<\/code><\/pre>\n<p>Notice the relative positioning. This is required to get the left-most image to respect the parent element assuming the content is centered and not left-aligned. The problem with this is that the left margin being applied to the right-most object is 75% of the browser window width, <em>but applied starting at the left of the parent element not the browser window<\/em>. This can cause the right-most element to push off the screen (not respecting the right edge of the parent element). Also, inexplicably, these element will eventually wrap if you move the browser window narrow enough.<\/p>\n<p>If you switch to absolute positioning here, you solve some of the above problem but then your objects will be left-aligned and ignore the parent elements left position entirely. Also, at narrow enough browser window sizes, the images will overlap. But hey, at least the objects were equidistant!<\/p>\n<h3><span style=\"color: red;\">FAIL:<\/span> Give the objects a common left percentage margin<\/h3>\n<p>My next stab was to give each element, <strong>except the first one<\/strong>, a common percentage left margin. <\/p>\n<pre rel=\"HTML\" class=\"lang-html\"><code>&lt;span class=\"do-not-wrap\"&gt;\r\n  &lt;img src=\"images\/shape-red.png\"&gt;\r\n  &lt;img src=\"images\/shape-green.png\" class=\"mover\"&gt;\r\n  &lt;img src=\"images\/shape-yellow.png\" class=\"mover\"&gt;\r\n  &lt;img src=\"images\/shape-blue.png\" class=\"mover\"&gt;\r\n&lt;\/span&gt;<\/code><\/pre>\n<p>Applying the margin:<\/p>\n<pre rel=\"CSS\" class=\"lang-css\"><code>img.mover {\r\n  margin-left: 15%;\r\n}<\/code><\/pre>\n<p>You should be able to tell from looking at that percentage that this technique is doomed. I just picked a percentage that seemed to work best. There is nothing mathematical I could think of that would work here. Because the parent element is a percentage of the width of the browser window, and the margin is a percentage of the browser window not the parent element, the growth rates will be very difficult to match.  Also notice the &#8220;no-wrap&#8221; span, which is necessary to prevent &#8230;wait for it&#8230; wrapping. But hey, at least the objects were equidistant!<\/p>\n<h3><span style=\"color: red;\">FAIL:<\/span> Just use a table!<\/h3>\n<p>Even &#8220;throwing in the towel&#8221; on CSS doesn&#8217;t seem to work here. I thought this would work for sure, being that tables have that sometimes-useful-sometimes-infuriating ability to auto space it&#8217;s cells evenly.<\/p>\n<pre rel=\"HTML\" class=\"lang-html\"><code>&lt;table&gt;\r\n\t&lt;tr&gt;\r\n\t\t&lt;td class=\"leftalign\"&gt;\r\n\t\t\t&lt;img src=\"images\/shape-red.png\"&gt;\r\n\t\t&lt;\/td&gt;\r\n\t\t&lt;td&gt;\r\n\t\t\t&lt;img src=\"images\/shape-green.png\"&gt;\r\n\t\t&lt;\/td&gt;\r\n\t\t&lt;td&gt;\r\n\t\t\t&lt;img src=\"images\/shape-yellow.png\"&gt;\r\n\t\t&lt;\/td&gt;\r\n\t\t&lt;td class=\"rightalign\"&gt;\r\n\t\t\t&lt;img src=\"images\/shape-blue.png\"&gt;\r\n\t\t&lt;\/td&gt;\r\n\t&lt;\/tr&gt;\r\n&lt;\/table&gt;<\/code><\/pre>\n<p>Notice the extra align classes in the first and last cells. If all the cells are centered, that allows the objects to be equidistant but then neither the left object or the right object is aligned to the edge of the parent element. This is solveable by applying a left alignment to the left-most cell and a right alignment to the right-most cell &#8212; <strong>but then the objects are no longer equidistant<\/strong>. Back to the drawing board.<\/p>\n<h3 id=\"the-solutions\"><span style=\"color: green;\">PASS:<\/span> Flexbox Justification<\/h3>\n<div class=\"explanation\">I&#8217;m adding this in June 2015 (seven years later!) because it&#8217;s the best solution (if you&#8217;re able to use flexbox).<\/div>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;div class=\"container\"&gt;\r\n  &lt;div&gt;&lt;\/div&gt;\r\n  &lt;div&gt;&lt;\/div&gt;\r\n  &lt;div&gt;&lt;\/div&gt;\r\n  &lt;div&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\u200b<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">.container {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}<\/code><\/pre>\n<p data-height=\"238\" style=\"height: 238px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"wapPzg\" data-default-tab=\"result\" data-user=\"chriscoyier\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/wapPzg\/\" rel=\"noopener\">Equidistant Objects<\/a> by Chris Coyier (<a href=\"http:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3><span style=\"color: green;\">PASS:<\/span> First on the left, float the rest right in equal size boxes<\/h3>\n<p>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:<\/p>\n<p><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2008\/03\/floatytechnqiue.png' alt='floatytechnqiue.png' data-recalc-dims=\"1\" \/><\/p>\n<p>HTML:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;img src=\"images\/shape-red.png\"&gt;\r\n&lt;div id=\"movers-row\"&gt;\r\n\t&lt;div&gt;&lt;img src=\"images\/shape-green.png\"&gt;&lt;\/div&gt;\r\n\t&lt;div&gt;&lt;img src=\"images\/shape-yellow.png\"&gt;&lt;\/div&gt;\r\n\t&lt;div&gt;&lt;img src=\"images\/shape-blue.png\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>CSS:<\/p>\n<pre rel=\"CSS\" class=\"lang-css\"><code>#movers-row {\r\n\tmargin: -120px 0 0 120px;\r\n}\r\n#movers-row div {\r\n\twidth: 33.3%;\r\n\tfloat: left;\r\n}\r\n#movers-row div img {\r\n\tfloat: right;\r\n}<\/code><\/pre>\n<p>There is an <a href=\"https:\/\/css-tricks.com\/examples\/EquidistantObjects\/\">example page<\/a>, where I was working this. It&#8217;s not pretty&#8230; but you can see the winner on the bottom. I&#8217;m sure some of you all have some better solutions for this, so let me have it!<\/p>\n<h3><span style=\"color: green;\">PASS:<\/span> Using inline-block and justified text<\/h3>\n<p>This can be done by setting the elements to <code>display: inline-block;<\/code> and the parent element to <code>text-align: justify;<\/code>. Well, it&#8217;s slightly more complicated and what I&#8217;d call a bona fide CSS trick. You add an additional element (via pseudo element) that is 100% wide and the previous inline blocks will line up.<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;div id=\"container\"&gt;\r\n  &lt;div&gt;&lt;\/div&gt;\r\n  &lt;div&gt;&lt;\/div&gt;\r\n  &lt;div&gt;&lt;\/div&gt;\r\n  &lt;div&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\u200b<\/code><\/pre>\n<pre rel=\"CSS\" class=\"lang-css\"><code>#container {\r\n  height: 125px;\r\n  text-align: justify;\r\n  border: 10px solid black;\r\n  font-size: 0.1px; \/* IE 9\/10 don't like font-size: 0; *\/\r\n  min-width: 600px;\r\n}\r\n#container div {\r\n  width: 150px;\r\n  height: 125px;\r\n  display: inline-block;\r\n  background: red;\r\n}\r\n#container:after {\r\n  content: '';\r\n  width: 100%; \/* Ensures there are at least 2 lines of text, so justification works *\/\r\n  display: inline-block;\r\n}<\/code><\/pre>\n<p>Demo:<\/p>\n<pre class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-type=\"result\" data-href=\"nfyGk\" data-user=\"chriscoyier\" data-safe=\"true\"><code><\/code><a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/nfyGk\" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Just take me down to the solutions, please. 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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":363724,"url":"https:\/\/css-tricks.com\/css-custom-highlight-api-early-look\/","url_meta":{"origin":577,"position":0},"title":"CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web","date":"March 1, 2022","format":false,"excerpt":"Styling ranges of text in software is a very useful thing to be able to do. Thankfully, we have the CSS Custom Highlight API to look forward to because it represents the future of styling text ranges on the web. One example: if you\u2019ve ever used text editing software like\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/text-selection-styling.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":208,"url":"https:\/\/css-tricks.com\/fluid-width-and-floating-object-possibilities\/","url_meta":{"origin":577,"position":1},"title":"Fluid Width and Floating Object Possibilities","date":"October 14, 2007","format":false,"excerpt":"The typical technique for making a fluid width layout is to have your main content have a minimum and maximum width and then make sure it is working in all browsers with various techniques. Another way is to give elements on your page absolute positioning relative to the browser window\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2414,"url":"https:\/\/css-tricks.com\/qa-v4\/","url_meta":{"origin":577,"position":2},"title":"Q&#038;A v4&#8230;","date":"March 23, 2009","format":false,"excerpt":"...is now up on Smashing Magazine. I answer questions about equidistant spacing on elements, CSS image\/font replacement, \"max sides\" on images, and a bunch of \"quickfire questions\".","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":255188,"url":"https:\/\/css-tricks.com\/snap-animation-states\/","url_meta":{"origin":577,"position":3},"title":"Snap Animation States","date":"May 26, 2017","format":false,"excerpt":"There are many ways to make icons for a website. Inline SVG is scalable, easy to modify with CSS, and can even be animated. If you're interested in learning more about the merits of using inline SVG, I recommend reading Inline SVG vs Icon Fonts. With ever increasing browser support,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":276652,"url":"https:\/\/css-tricks.com\/using-scoped-slots-in-vue-js-to-abstract-functionality\/","url_meta":{"origin":577,"position":4},"title":"Using Scoped Slots in Vue.js to Abstract Functionality","date":"September 19, 2018","format":false,"excerpt":"Let\u2019s start with a short introduction to Vue.js slots concept. Slots are useful when you want to inject content in a specific place of a component. Those specific places that you can define are called slots. For example, you want to create a wrapper component that is styled in a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/vue-scoped-slots.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303621,"url":"https:\/\/css-tricks.com\/a-guide-to-console-commands\/","url_meta":{"origin":577,"position":5},"title":"A Guide to Console Commands","date":"February 20, 2020","format":false,"excerpt":"The developer\u2019s debugging console has been available in one form or another in web browsers for many years. Starting out as a means for errors to be reported to the developer, its capabilities have increased in many ways; such as automatically logging information like network requests, network responses, security errors\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/console-commands-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/577"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=577"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/577\/revisions"}],"predecessor-version":[{"id":204322,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/577\/revisions\/204322"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}