How do I make multiple divs arrange horizontally with equal width?

Question

I want two, three or more divs arranged horizontally, then each width will fill all the available space. For example with two divs, they will each take up half the space, with three divs they will take up 1/3 the space, and so on.

I tried using display inline-block, and can get the divs to arrange side by side, but how do you make them fill available width of parent container?

EDIT: Preferably without display flex method (I'm not sure if its compatible with IE11 fully)

.container{
  border: solid 1px green;
  height: 50px;
  box-sizing: border-box;


}
.button{
  display:inline-block;
  border: solid 1px black;
  height: 20px;
}

<div class="container">
<div class="button ">
div1
</div>
<div class="button ">
div2
</div>
<div class="button ">
div3
</div>
</div>

http://stackoverflow.com/questions/35325371/how-can-i-let-a-div-fill-100-width-if-no-other-elements-are-beside-it/35325430#35325430 — Nenad Vracar, Aug 10 '16 at 18:35
FYI, SO has its own snippet mechanism these days. You can get at it with the icon above the editing window that looks like a document with `<>` on it. — zwol, Aug 10 '16 at 18:36
@sjs That's exactly what it is. I edited your question to use it. — zwol, Aug 10 '16 at 18:38
`flex-grow` works fine in IE11: http://stackoverflow.com/a/37039546/3597276 — Michael Benjamin, Aug 10 '16 at 18:41

zwol · Answer 1 · 2016-08-10T18:41:19.853

5

This is trivial with flexbox layout:

.container{
  border: solid 1px green;
  height: 50px;
  box-sizing: border-box;
  display: flex;
}
.button{
  display:inline-block;
  border: solid 1px black;
  height: 20px;
  flex: 1;
}

<div class="container">
<div class="button ">
div1
</div>
<div class="button ">
div2
</div>
<div class="button ">
div3
</div>
</div>

All I did was add the display:flex and flex:1 properties to container and button respectively.

Flexbox is very widely supported nowadays, but you might want to avoid it if you care about IE (up to and including version 11) or older Android. Unfortunately, without flexbox, what you want to do is much more difficult. I will let someone else write a non-flexbox answer.

edited Aug 10 '16 at 18:41

answered Aug 10 '16 at 18:38

zwol

135,547
38
252
361

Thanks, I was concerned that IE11 would barf it up since I found a lot of links online saying its buggy. – sjs Aug 10 '16 at 18:41
@sjs if you manage to avoid all the bugs [listed here](https://github.com/philipwalton/flexbugs), a flexbox will look fine in IE11. – Woodrow Barlow Aug 10 '16 at 18:44
Keep in mind that in a *flex formatting context*, the `display` property on flex children is ignored / overridden. There's no point in using `display: inline-block`, as you have in your code. – Michael Benjamin Aug 10 '16 at 19:20
1

@Michael_B I left it in to underscore the minimal changes from the OP's code. – zwol Aug 11 '16 at 17:52

score 3 · Accepted Answer · answered Aug 10 '16 at 18:39

3

You can use display: table in the container and display: table-cell on buttons.

.container{
  border: solid 1px green;
  height: 50px;
  box-sizing: border-box;
display: table;
width: 100%;

}
.button{
  display: table-cell;
  border: solid 1px black;
  height: 20px;
}

<div class="container">
<div class="button ">
div1
</div>
<div class="button ">
div2
</div>
<div class="button ">
div3
</div>
</div>

answered Aug 10 '16 at 18:39

nikoskip

1,860
1
21
38

this is the best non-flexbox solution. – Woodrow Barlow Aug 10 '16 at 18:40

How do I make multiple divs arrange horizontally with equal width?

2 Answers2