Make child divs expand to fill parent div's width

Answer 1

You can add these three properties to the .child CSS rule:

width:33%;
float:left;    
box-sizing: border-box;

The last line makes sure it will also work when you add borders, padding and margin to the boxes.

ONLINE DEMO

Ps: not directly related but there is also an error in the border-bottom for parent, corrected in fiddle above. When you use non-0 value you need to specify unit:

    border-bottom:1px;

Answer 2

I needed for my solution to accommodate a variance in the number of elements for them to be completely responsive.

I discovered an interesting solution to this. It essentially displays like a table. Every element shares available width, and this also works for images very well: http://jsfiddle.net/8Qa72/6/

.table {
    display: table;
    width: 400px;
}

.table .row {
    display: table-row;
}

.table .row .cell {
    display: table-cell;
    padding: 5px;
}

.table .row .cell .contents {
    background: #444;
    width: 100%;
    height: 75px;
}

Answer 3

If you know there will always be three children, you can simply use:

.parent > .child {
    float: left;
    width: 33%;
}

.parent {
    overflow: auto; /*or whatever float wrapping technique you want to use*/
}

If you do not know how many children there are, you will need to use CSS tables, flexbox, or perhaps combine inline-blocks with text-align: justify.