Multiple divs spread to fill width of container?

Question

My setup right now is something like this

<div class="container">
    <div class="child">AAAAA</div>
    <div class="child">BB</div>
    <div class="child">CCCCCCCCC</div>
    <div class="child">D</div>
</div>

.container {
    width: 100%;
    border: 1px solid black;
    display: inline-block;
}
.child {
    border: 1px solid grey;
    display: inline-block;
}

http://jsfiddle.net/T2478/

I want all divs with class "child" to spread themselves up to fill the entire width of the div with class "container"?

Probably a pretty easy solution, I'm fairly new to html and css

How can I do this so that no matter what width "container" is the children will spread out evenly?

Thanks!

Answer 1

The use of flex was actually a great idea. Here you go:

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  
  border: 1px solid black;
}

.child {
    flex: 1 1 auto;
    
    border: 1px solid grey;
}

<div class="container">
    <div class="child">AAAAA</div>
    <div class="child">BB</div>
    <div class="child">CCCCCCCCC</div>
    <div class="child">D</div>
</div>
    

You may play with justify-content value and with flex value for extra customization.
And no need to mess around with tables where you shouldn't.

P.S. You can dive into the flex easily with this well known article.

Answer 2

You're going to need to emulate table layout behavior, as in this answer.

This does NOT involve using actual <table> and children elements! This involves using certain values of the display property, namely table and table-cell, to emulate the layout behavior of tables. You don't want to use actual table markup for pure layout, as that is semantically incorrect and frowned upon. If your content is actual tabular data that belongs in a table, then it makes perfect sense to use an actual <table>. I'll present the non-table way here since that's likely what you want.

Your div.container element will need the display: table; property to make it behave like <table>. You'll also want the table-layout rule with the fixed value, to make all of your child elements evenly spaced. Your div.child elements will then need display: table-cell; to make them act like table cells. The browser will now automagically compute evenly-spaced layouts for your child elements. Note that you do not need/want a width rule on your child elements anymore, since the browser computes that. The container element will need a width of some kind, otherwise the table will simply collapse to be only as large as its content. Note that content can also overflow out of the child elements if the content width is more than the computed, evenly-spaced dimensions.

The final code is below, and here's a fiddle.

HTML:

<div class="container">
    <div class="child">AAAAA</div>
    <div class="child">BB</div>
    <div class="child">CCCCCCCCC</div>
    <div class="child">D</div>
    <div class="child">E</div>
    <div class="child">E</div>
    <div class="child">E</div>
</div>

CSS:

.container {
    width: 100%;
    border: 1px solid black;
    display: table;
    table-layout: fixed;
}
.child {
    border: 1px solid grey;
    display: table-cell;
}

---

Also, an unrelated note about display: inline-block;. It will render any and all whitespace between inline-block elements (you can see this as spacing between your child elements in your original fiddle). This is normal and following the spec, but is sometimes undesired. You can read about ways to get around it here.

Answer 3

I know this answer is quite old, but I can across a problem like this just now and used CSS' calc function. Take a look at the updated code I made for you.

<div class="container">
    <div class="child">AAAAA</div>
    <div class="child">BB</div>
    <div class="child">CCCCCCCCC</div>
    <div class="child">D</div>
</div>

.container {
    width: 100%;
    border: 1px solid black;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
}
.child {
    border: 1px solid grey;
    width: calc( 100% / 4); /* 4 is how many .child divs you have */
}

jsfiddle