0

I have this css code:

.row {
    width:100%;
    height:100px;
}

.square {
    width:100px;    
    height:100px;
}

I would like to put 5 squares div inside the row div, but I want to put it justified, so that the separation between squares should be equal depending on the window size of the user.

I wonder what would be better, margin, float, positioning absolute/relative, etc.

Pranav 웃
  • 8,469
  • 6
  • 38
  • 48
Chris0089
  • 39
  • 1
  • 5
  • 1
    possible duplicate of [Justify divs with CSS to fill width of parent container](http://stackoverflow.com/questions/7051768/justify-divs-with-css-to-fill-width-of-parent-container) – randak Dec 09 '13 at 04:06

1 Answers1

0

If it's okay to hardcode it in this situation, you can do:

.square {
  margin: calc(10% - 50px);
  }

The margin is:

20% of the whole width minus 100px of the width of the element all divided by 2 (there're two margins).

Note (thanks to @randak): mobile compatibility and very old ie might lack calc() support

After writting my answer, I found a put a lot of thought into solution for this problem at http://css-tricks.com/equidistant-objects-with-css/, which you might want to check.

Francisco Presencia
  • 8,732
  • 6
  • 46
  • 90
  • 3
    Make sure to check out browser support if you go this route. http://caniuse.com/calc – randak Dec 09 '13 at 03:47
  • I find that having retro-compatibility for current, previous and two previous ie versions is safe enough as not to put a disclaimer since that's the target for most webs. However, I'll do it for the mobiles, thanks (: – Francisco Presencia Dec 09 '13 at 03:51
  • 1
    Also a quick note that this doesn't strictly justify the squares as there are still margins on the sides of the first and last square... perhaps can be fixed by tweaking the percentage. – Albert Xing Dec 09 '13 at 03:57