No replies
Webfaced
Webfaced's picture
Offline
newbie
Last seen: 11 years 37 weeks ago
Joined: 2011-03-16
Posts: 1
Points: 2

Hi all,

I am looking to stack DIVs vertically until the combined height reaches the height of their parent container, at which point the next DIV will form a new vertical column to the side.

I have seen this done using JS, however, I hope there is a purely CSS alternative?

I am working with this to produce the basic layout:

HTML:

<div id="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

CSS:

#parent {
width:100%;
height:100px;
overflow:hidden;
border:solid 1px #000;
}
.child {
width:30px;
height:30px;
border:solid 1px #ff0000;
}

Hope someone can help and if the answer is to use some JS I wonder if anyone knows where I can find an example as I am buggered if I can find the one I originally found!!!