equal margin between divs

Question

Suppose you have n floating divs in a container. How do you make space between them (margin) to be equal, automatically? it should support window resize event.

I can use JQuery if needed, but I'd rather it to be pure html/css. Thanks

I suppose you mean that those divs should *adapt* their margins in order to fill the container? — MaxArt, Apr 30 '13 at 21:29
Since it's mandatory to be floated, thn `display:table` is out of question. Anyways, in JS, it's quite possible as long as you know at least how many divs per line you want. So you would grab innerWidth() of the container and of each div, divide by the number of div's per line you set up and then calculate the margin of each one. Can try make a code for you when I get home if noone else answers. Anyways, try reading [this answer](http://stackoverflow.com/a/10550660/684932), it might help you. — RaphaelDDL, Apr 30 '13 at 21:33

vsync · Accepted Answer · 2013-04-30T21:43:28.727

3

Easy! justify them! (using only CSS)

Note: Don't float them, floating is the LAST thing you should do in many cases.

Here's an example: DEMO PAGE

HTML

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>another item</li>
    <li>and another</li>
</ul>

CSS

ul{ width:100%; text-align:justify; }
ul::after{ content:''; display:inline-block; width:100%; }
  ul li{ display:inline-block; }

edited Apr 30 '13 at 21:43

answered Apr 30 '13 at 21:29

vsync

118,978
58
307
400

I don't get why so many designers keep using floating elements. They're more a bother than anything else. – MaxArt Apr 30 '13 at 21:33
that's great, and maybe I should give up on floating – Creativity Paralyze Apr 30 '13 at 21:33

score 0 · Answer 2 · answered Apr 30 '13 at 21:32

0

div { float: left; margin-left: 5%; }

answered Apr 30 '13 at 21:32

Nathan

503
3
10

equal margin between divs

2 Answers2

HTML

CSS