sjs sjs - 3 months ago 16
CSS Question

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

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>




Answer

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>