Automatic margins on floated or inline-block elements

Question

I'm trying to make all of the sub-elements in a div space nicely. I have set up the css using inline-block elements and floated elements. The child elements are a fixed size.

jsFiddle

HTML

<div class="content">
    <h2>Inline-block</h2>
    <a href="#" class="i-b-item">I-B Item 1</a>
    <a href="#" class="i-b-item">I-B Item 2</a>
    <a href="#" class="i-b-item">I-B Item 3</a>
    <a href="#" class="i-b-item">I-B Item 4</a>
    <a href="#" class="i-b-item">I-B Item 5</a>
    <a href="#" class="i-b-item">I-B Item 6</a>
    <a href="#" class="i-b-item">I-B Item 7</a>
    <a href="#" class="i-b-item">I-B Item 8</a>
    <h2>Floated</h2>
    <a href="#" class="f-item">Float Item 1</a>
    <a href="#" class="f-item">Float Item 2</a>
    <a href="#" class="f-item">Float Item 3</a>
    <a href="#" class="f-item">Float Item 4</a>
    <a href="#" class="f-item">Float Item 5</a>
    <a href="#" class="f-item">Float Item 6</a>
    <a href="#" class="f-item">Float Item 7</a>
    <a href="#" class="f-item">Float Item 8</a>
    <div style="clear:both"></div>
</div>

CSS

.content {
    background: grey;
}

.content a{
    padding: .5em;
    margin: .5em;
    height: 75px;
    width: 150px;
    background: white;
}

.i-b-item{
    display: inline-block;
}

.f-item{
    float: left;
    display: block;
}

Basically when the window size changes, I want the child element margins to make them fill the remaining space. So instead of having the leftover space on the right, I'd like the margins of the child elements to expand to space all of the child elements evenly while still being left aligned.

I'd prefer not to do any calculations with Javascript, I'm hoping for a pure css solution but can't seem to get anything to work right.

The problem with percentages is that the margin is still fixed and is not dynamically changing with the size of the window. — tedski, Oct 28 '12 at 13:49
Your solution DOES fill the remaining space, given that the remaining space is wide enough for your `.content a` with it's margins & padding. Otherwise, you'll have to do percentages like @tedski mentioned — Andy, Oct 28 '12 at 15:18
http://stackoverflow.com/questions/10548417/how-to-distribute-floated-elements-evenly-with-a-dynamic-column-and-row-count-in/10550660#10550660 — thirtydot, Oct 28 '12 at 15:46
Do you want the number of elements on each row to remain static, or do you want them to move up when there's space? — jamesplease, Oct 29 '12 at 03:26
I'd like them to move up when there is space. I want to have the layout be determined by the device screen width. — tedski, Oct 29 '12 at 14:05
http://stackoverflow.com/a/16310009/703717 - Check out the 'Justifying boxes on multiple lines' fiddle — Danield, Oct 10 '13 at 09:08

score 0 · Answer 1 · answered Sep 20 '13 at 23:15

Use text-align:justify to parent element where child elements are set to display:inline-block.

In your case, .content class can have it. and your space will be distributed equally while elements can remain of a fixed size (width).

.content {
    text-align:justify;
}

Hope this helps.

Automatic margins on floated or inline-block elements

1 Answers1