Prevent splitting inner divs while using column-width property

Question

I'm trying to create a multi-column layout while still holding the "inner divs" together. Line-height property does a good job stacking divs on top of each other but splits my inner divs in half.

The columns does not have to be exactly the same height.

Any help would be greatly appreciated!

<div class="c">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

.c {
  -webkit-column-width:250px; -webkit-column-gap:10px;
  -moz-column-width:250px; -moz-column-gap:10px;
  column-width:250px; column-gap:10px;
  color:white;
}

.c > div:nth-child(1) { height:100px; background-color:grey; }
.c > div:nth-child(2) { height:200px; background-color:blue; }
.c > div:nth-child(3) { height:100px; background-color:red; }
.c > div:nth-child(4) { height:100px; background-color:yellow; }
.c > div:nth-child(5) { height:100px; background-color:black; }
.c > div:nth-child(6) { height:100px; background-color:orange; }

See example below http://jsfiddle.net/D73pD/

score 0 · Accepted Answer · edited May 23 '17 at 12:11

0

You have to add

-webkit-column-break-inside: avoid;

for each div element

Updated Fiddle: http://jsfiddle.net/D73pD/1/

Source

edited May 23 '17 at 12:11

Community

1
1

answered Jan 30 '14 at 06:00

Debajyoti Das

2,038
4
34
66

Prevent splitting inner divs while using column-width property

1 Answers1