Equally spaced DIVs also from the parent's border

Question

I need inline DIVs to be spaced equally betweenn each other, and additionally between border and first (or last) DIV in the row. I use solution found on Fluid width with equally spaced DIVs. It gives me equal spacing between DIVs, but left DIV sticks to the left border, and right DIV sticks to the right. I'd like it to be equally spaced from the borders as they are from each other.

UPDATE: content DIVs are being created dynamically by Django, so I cannot say how many of them will be there in the line (between 1 and 4).

How can I create additional space on sides which will be equal to distance between DIVs?

Here is html:

    <div class="container">
        <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
            <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
            <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
        </div>

and css:

div.container {
    width: 100%;
    text-align: justify;
}


div.content {
    display: inline-block;
    width: 20%;
    margin: 0 auto;
}

div.container:after {
    content: "";
    width: 100%;
    display: inline-block;
}

score 1 · Answer 1 · answered Oct 03 '12 at 21:41

1

You could use box layout and padding of a certain percentage, like this (I just used 10% padding but you can adjust to suit your needs):

http://jsfiddle.net/XXPwW/2/

answered Oct 03 '12 at 21:41

jenjenut233

1,938
16
13

Ok. I wasn't specific about one thing. I need it to be independent on amount of content DIVs, as those will be created dynamically by Django. I'll update that in question. Your advice doesn't look good with two content DIVs, and requires changing padding. – Marek Oct 03 '12 at 21:45
Your width 20% will also not look as good with various numbers of columns, so I assumed you were making that number dynamic (relative to the number of columns output) and could do the same with outer padding. Thanks for updating. – jenjenut233 Oct 03 '12 at 21:49
When I'll get multiple lines of those, that wouldn't look good if last line (with 1,2 or 3 DIVs) would get larger DIVs then previous. – Marek Oct 03 '12 at 21:55

Marek · Accepted Answer · 2012-10-03T21:51:51.420

And right after asking the question, I've figured out the answer (how ironic?). I'll share it in case someone needs it.

What I've done was creating spacer DIVs with 0 width before first and last content DIV. Here is how it looks like:

HTML:

    <div class="container">
        <div class="spacer"></div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="spacer"></div>
    </div>

and css:

    div.container {
        width: 100%;
        text-align: justify;
    }


    div.content {
        display: inline-block;
        width: 20%;
        margin: 0 auto;
    }

    div.container:after {
        content: "";
        width: 100%;
        display: inline-block;
    }

    div.spacer {
        display: inline-block;
        width: 0;
    }

Equally spaced DIVs also from the parent's border

2 Answers2