How to put 3 elements in one row in a parent div?

css, html

Solution

So you want a fix margin but dynamic width? That takes a little more markup, unless you're willing to drop support for IE9 and below by using flexbox.

The thing is, you can't split 100% into percentages and fix values (dynamic width, fix margin) just like that. (there are ways using `calc()` .. but if you're going to use calc, you could also use flexboxes instead.

Note: The child elements aren't exactly the same width. There won't be a (non-flexbox, non-calc) way to achieve this.

Here's an example (jsFiddle) with a little more markup, but IE8 and 9 support.

HTML:

<div class="mom">
    <div class="child">
        <div class="childinner">Lorem ipsum dolor.</div>
    </div>
    <div class="child">
        <div class="childinner">Amet laborum cupiditate.</div>
    </div>
    <div class="child">
        <div class="childinner">Ratione maxime et!</div>
    </div>
</div>

CSS:

.mom {
    width: 100%; /* Try setting this to 400px or something */
    display: table;
    border: 1px solid #444444;
}
.child {
    display: table-cell;
}
.childinner {
    margin-left: 25px;
    /* Decorative .. */
    background-color: #cccccc;
    min-height: 40px;
}
.child:first-child .childinner {
    margin-left: 0;
}

Problem

Original source