Comments on: Equidistant Objects with CSS

By: johnathan kendall

johnathan kendall — Tue, 21 Oct 2008 13:23:56 +0000

I worked out an alternate way of doing this a while ago which allows the same thing with no extra html elements. Have a look at: my blog... it works in all the usual suspects.

By: the vitamin k blog » Blog Archive » Equidistant Objects with css - another way

Tue, 21 Oct 2008 13:10:50 +0000

[...] recently read an article about the equidistant spacing of elements with css over at css-tricks.com. The simplicity of the technique really struck me as a case of good old lateral thinking. Despite [...]

By: jason

jason — Mon, 15 Sep 2008 22:40:33 +0000

After a weekend of trying to do this the right way, I figured out the easy way.

This is not my favorite way of doing this, but i set a DIV to {text-align: justify} and added a spacer image at the end of the images I wanted to evenly space, in this case, tile across with multiple rows with a width large enough to ensure it needed its own line.

Not pretty, but really easy and it works.

By: frankenchicken

frankenchicken — Thu, 03 Jul 2008 19:57:25 +0000

There is actually an easy way to do this with a table. Sometimes css makes things harder. The table solution is not as elegant as the css solution, but it works just as well. And, it won't break in quirks mode. :-) You can make the images in the FarLeftCell, MiddleCells and FarRightCell whatever width you want as long as they do not exceed the width of the parent object. (if the total width of your images equals 500px, but the parent is only 400px, the table will bee 500px) The table cannot go any shorter that the total width of the images in its cells. The css sets the width for the MiddleCells to be 1px, but it could be 0px. The table realizes that the image is larger and expands the cell to fit around the image. The middle cells determine the amount equal space between the other cells. You have to interleave these between the other cells. Change the width in the css to reflect the number of middle cells you have. If you have 4 MiddleCells in the table divide 100% by 4 = 25%. If you have 6 MiddleCells, 100% divided by 6 = 16.66%. VERY IMPORTANT: Make sure you put a non-breaking space ( ) in each of the SpacerCells. The Empty table SpacerCells won't behave properly unless you do this. HTML:

CSS:

.MainNavBinTable {
    width: 100%;
}

.FarLeftCell {
    text-align: left;
}

.MiddleCells {
    width: 1px;
}

.SpacerCells {
    width: 20%; /*divide 100% by number of space cells to get this number. since there are 5 spacer cells, 100/5 = 20%*/
}

.FarRightCell {
    text-align: right;
}

By: Best Of March 2008 - juliomarroquin.com

Best Of March 2008 - juliomarroquin.com — Tue, 01 Apr 2008 23:14:21 +0000

[...] Equidistant Objects with CSS – CSS-TricksCreating 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. [...]

By: Best Of March 2008 | Best of the Month | Smashing Magazine

Best Of March 2008 | Best of the Month | Smashing Magazine — Tue, 01 Apr 2008 21:11:40 +0000

Sat, 29 Mar 2008 14:49:29 +0000

By: Links despues de semana santa | Desarrollo Web, Django, Python, Web2.0 | Culpable de mis opiniones !!

Fri, 28 Mar 2008 11:36:30 +0000

[...] Objetos equidistantes con CSS [...]

By: Sean

Sean — Thu, 27 Mar 2008 17:55:26 +0000

Seems like :first-child is the best way to accomplish something like this. It works in both FF and IE7 perfectly (the IE7 part surprised me the first time I tried it).

Yes, there is a problem with IE6, but when is there NOT a problem with IE6? Odds are, you are hacking or using a conditional CSS anyway for other issues, so a couple of extra lines of code to make :first-child work shouldn’t be a big deal.

By: CÃ³mo colocar objetos equidistantes horizontalmente con CSS » blogpocket 7.0

Tue, 25 Mar 2008 20:27:47 +0000

[...] Crear una fila horizontal de objetos que se encuentran equidistantes unos de otros, con CSS, es mÃ¡s fÃ¡cil de lo que parece. Sobre todo despuÃ©s de echar un vistazo a este tutorial: Creating Equidistant Objects with CSS. [...]