CODEWITHSUNDEEP
htmlcss
sjs
sjs

Reputation: 472

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>

Upvotes: 2

Views: 2304

Answers (2)

zwol
zwol

Reputation: 140788

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.

Upvotes: 5

nikoskip
nikoskip

Reputation: 1920

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>

Upvotes: 3

Related Questions