Create equal-width div's with CSS

Question

I have a div with a certain width and within this parent div I would like to place one or more 'child' divs. I would like them to be placed next to each other (so I'm using either float:left or display:inline-block) and I want them to all be the same width. I pretty much want them to fill the parent div (so if I have 4 divs they should each be 25% width, if 5 20% width etc) with a certain max-width. They key here is that it should work no matter the number of divs - could be 1, could be 5 could be 15.

I have tried doing this in the following jsFiddle, but I can't figure out how to make it work without any JavaScript. jsFiddle

I guess my problem is that divs usually expand to the width of their content where I want them to expand to fit the parent? I can try width:100% on all the child divs, but it doesn't seem like this plays too well with float:left or display:inline-block.

Is the number of divs going to change? Or is the width of the parent div dynamic? — hughes, Jun 20 '11 at 14:01
Yeah the number of divs is going to change. The width of parent is fixed. — Jaco Pretorius, Jun 20 '11 at 14:04
How is the number of divs going to change? Will javascript add and remove them, or are they generated (and subsequently fixed in number) when the page is generated? — hughes, Jun 20 '11 at 14:08
Both. When the page is created I might have 3 or 5 or 10 divs. Then later on more might be added with JavaScript. But I'll settle for a solution which just works for any number of divs (so adding more with JavaScript isn't the end of the world) — Jaco Pretorius, Jun 20 '11 at 14:10
What is the actual content that you need to display on the page for this? — Ian Oxley, Jun 20 '11 at 14:56

score 5 · Answer 1 · answered Jan 08 '17 at 00:34

The best option is display:flex for parent div and use flex-basis:100% in child div

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
}
.flex-item {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  background: tomato;
  padding: 5px;
  height: 150px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  border: 1px solid #333;
  box-sizing: border-box;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

score 5 · Accepted Answer · edited May 23 '17 at 12:00

5

Maybe make it as a table, and add all elements as td inside one tr. If you want here is a jQuery Solution

EDIT

This is the only way I can think of using pure CSS, not sure if there is any other way

Also check this already existing question Distribute elements evenly using CSS in SO

edited May 23 '17 at 12:00

Community

1
1

answered Jun 20 '11 at 14:10

Balanivash

6,709
9
32
48

Agreed, tables are well-suited for this behaviour. Adding additional `` elements with javascript will also not break the solution. – hughes Jun 20 '11 at 14:14

score 4 · Answer 3 · answered Jun 25 '12 at 15:06

4

Maybe the use of display: table; would help? http://jsfiddle.net/g4dGz/119/

answered Jun 25 '12 at 15:06

gce

1,563
15
17

score 0 · Answer 4 · answered Jun 20 '11 at 14:03

0

What about: http://jsfiddle.net/TnCCd/

Borders add to width, and the overflow: hidden bit will clear the floats so the container doesn't collapse

answered Jun 20 '11 at 14:03

Alex

7,320
1
18
31

But if I only have 3 divs they don't fill the parent at all? http://jsfiddle.net/TnCCd/ – Jaco Pretorius Jun 20 '11 at 14:06
1

this is fixed width, but what is needed id dynamic width – Balanivash Jun 20 '11 at 14:08

score 0 · Answer 5 · answered Jun 20 '11 at 14:12

It sounds like this would easiest be achieved by using a table (although this is a swearword in these tableless-times). Not knowing what the elements is used for I don't know if this is semantically correct.

You could also try experimenting with display:table-cell etc. But that's less compatible with older browsers...

score 0 · Answer 6 · answered Jun 20 '11 at 14:13

0

I'm just going to through this out there - you may be best off going with gasp TABLES (oh no what did he say! aaaaaaah!)

http://jsfiddle.net/taw57/

EDIT: My fiddle shows your broken div version with two table versions with differing numbers of columns.

answered Jun 20 '11 at 14:13

josh.trow

4,861
20
31

Yeah seems like this is the way to go. I'm gonna leave the question for a bit to see if someone comes up with a non-table answer. – Jaco Pretorius Jun 20 '11 at 14:15

Create equal-width div's with CSS

6 Answers6