Float vertically-aligned div's like columns?

Question

I have a "container" div that will be docked to the left side of the page, and will always be 10px from the top, left, and bottom. Inside that div will be 10 small "inner" divs, which are arranged vertically. The container should always be just wide enough to hold all of the inner divs.

Here's the thing... whenever the container div cannot hold all of the inner div's in a single column (such as when the user reduces their browser height), I want the inner divs to expand over to a new "column" (but still remain inside the container div). In other words, the container div will expand horizontally as needed, so that no vertical scrollbars ever appear.

For example, if the height of the browser only goes down to div 7, then it should look like this...

Here's the jsFiddle of what I've got so far...

http://jsfiddle.net/ymESU/

And here's the code...

<!DOCTYPE html>
<html>

<head>

<style>
    #container {position: absolute; top: 10px; left: 10px; bottom: 10px; border: 1px solid black; padding: 5px; } 
    .innerBoxes {display: block; width: 100px; height: 100px; background: red; margin: 5px; padding: 10px; color: white;}
</style>

</head>

<body>

<div id="container">
  <div class='innerBoxes'>1</div>
  <div class='innerBoxes'>2</div>
  <div class='innerBoxes'>3</div>
  <div class='innerBoxes'>4</div>
  <div class='innerBoxes'>5</div>
  <div class='innerBoxes'>6</div>
  <div class='innerBoxes'>7</div>
  <div class='innerBoxes'>8</div>
  <div class='innerBoxes'>9</div>
  <div class='innerBoxes'>10</div>
</div>

</body>
</html>

What am I missing to accomplish this?

FYI- For this particular project, it only needs to work on modern versions of Chrome, so if the best solution requires CSS3, no problem.

Answer 1

If you're only browser requirement is Chrome, then you can go ahead with CSS3 columns. Use inline-blocks instead of floats:

#container {position: absolute; 
    top: 10px; left: 10px; bottom: 10px; 
    border: 1px solid black; padding: 5px; 
   -webkit-column-width:120px; -moz-column-width:120px;
  } 
.innerBoxes {
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background: red; 
    margin: 5px; 
    padding: 10px; 
    color: white;
}

Here it is working in a fiddle: http://jsfiddle.net/GHMb8/2/

update works in Firefox too if you add -moz-column-width:120px; (new fiddle)

Float vertically-aligned div's like columns?

Question

1 answers

solution1
4 ACCPTED 2013-04-22 20:27:42

Float vertically-aligned div's like columns?

Question

1 answers

solution1 4 ACCPTED 2013-04-22 20:27:42

solution1
4 ACCPTED 2013-04-22 20:27:42