Implementing columns in HTML/CSS

Question

I have a bunch of DIVs that contain textual information. They're all the same width (maybe 400px or so), but different heights. For space reasons, I'd like to have two or three columns of these DIVs (sort of like a want-ad section in a newspaper). See attractive ascii-art below :)

DIV1      DIV3
DIV1      DIV3
DIV1    
DIV1      DIV4
DIV1      DIV4
DIV1      DIV4
          DIV4   
DIV2      DIV4
DIV2

The DIVs are javascript-driven and change height at page-load time. I also shouldn't change their order (each DIV has a title, and they're sorted alphabetically).

So far I haven't found a good way to do it. HTML flow is left to right, then top to bottom, but I need top to bottom, then left to right.

I tried a naive implementation of a table with two columns, and have the DIVs in one column, and the other half in the other column. Have the time it looks reasonable (when the average height of the DIVs in each column comes out close), the other half it looks horrible.

I suppose if I was a javascript guru I could measure the DIVs after they've expanded, total them up, then move them from one table column to another at run time... but that's beyond my abilities, and I'm not sure it's possible anyway.

Any suggestions?

Thanks

UPDATE:

Thanks for the comments. It's obvious I did a poor job of asking the question :(

The DIVs are just a way of containing/grouping similar content -- not really using them for layout per se. They're all the same width, but different heights. I want to just spit them out on a page, and magically :) have them arranged into two columns, where the height of the two columns is pretty much the same -- like newspaper columns. I don't know how high the DIVs are when I start, so I don't know which column to place each DIV in (meaning that if I knew their heights, I'd split them among two table cells, but I don't know). So the example above is just a simple example -- it might turn out at run time that DIV 1 is larger than the other 3 combined (in which case DIV2 should float to the top of column2), or maybe DIV 4 turns out to be the big one (in which case DIVs 1, 2 and 3 would all be in column1, and DIV4 could be alone in column2)

Basically I was hoping there was a way to create two columns and have the content magically flow from column1 to column2 as needed (like Word does). I suspect this can't be done, but my HTML/CSS knowledge is pretty basic so maybe...?

Answer 1

Use float, like so:

<style>
.col1{
 width: 400px;
 height: 100px;
 float: left;
}
.col2{
 width: 400px;
 height: 150px;
 float: left;
}
.col3{
 width: 400px;
 height: 200px;
 float: left;
}
</style>
<div style="width: 1200px;">
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
</div>

Answer 2

You could wrap div1 and div2 in a wrapper div, and div 3 and div 4 in a wrapper div, then wrap those two in an outer wrapper. Use some css to the get formatting right and you should be good to go. The html might look something like this:

<div class="wrap">
  <div class="col">
     <div>div1</div>
     <div>div2</div>
  </div>
  <div class="col">
     <div>div3</div>
     <div>div4</div>
  </div>
</div>

Then, have some css like this:

.wrap {
  position: relative;
  overflow: auto;
}
.col {
  float: left;
  width: 400px;
}

That should do the right thing.

Answer 3

DO THIS WITH TABLES.

I am starting to use tables at work, and quite frankly? Doing those things in CSS is a mess, and much harder to debug.

Answer 4

The DIVs are javascript-driven

Well, whatever you mean by that, show us the code. If we can see how the DIVs are constructed by your JS, we can probably see how to create them a different way.

Answer 5

The draft CSS3 multi-column model does what you want. Firefox seems to support -moz versions of some of the properties and Safari/Chrome -webkit versions; I don't know about IE8 or Opera.

Answer 6

would it be possible to integrate them into a css-grid such as http://960.gs/ ?