2 columns from 2 groups of div's

Question

I have a situation similar to the following

<div class="col1">
  <h2>title</h2>
  <div><ul><li>Content</li><li>Another Item</li></ul></div>
</div>
<div class="col1">
  <h2>Another title</h2>
  <div><ul><li>More Content</li></ul></div>
</div>
<div class="col1">
  <h2>...</h2>
  <div><ul><li>More Content</li><li>Still more</li></ul></div>
</div>
....
<div class="col2">
  <h2>title</h2>
  <div><ul><li>Content</li></ul></div>
</div>
<div class="col2">
  <h2>Another title</h2>
  <div><ul><li>More Content</li><li>And More</li><li>...And More</li></ul></div>
</div>
<div class="col2">
  <h2>...</h2>
  <div><ul><li>More Content</li><li>Still more</li></ul></div>
</div>
....

I realize this would be much easier if I just had the div's of class="col1" all within one div and the div's of class="col2" all within another but is there any way I can get this displaying in 2 columns without doing that? Thanks in advance.

Answer 1

You may try something like this:

<style type="text/css">
  .col1 {
    display:block;
    float: left;
    background: #ff0;
    clear: left;
    width: 200px;
  }
</style>

background is just set to see what is happening and width may be adjusted.

Answer 2

<div class="col1 left" >
  <h2>title</h2>
  <div><ul><li>Content</li><li>Another Item</li></ul></div>
</div>

<div class="col2 right" >
  <h2>title</h2>
  <div><ul><li>Content</li><li>Another Item</li></ul></div>
</div>

<div class="clear"></div> 

where .left {float:left} .right{float:right}

so for each "row" y will have a left and a right.

Must clear floats for each "row" y begin

.clear {clear:both}

Answer 3

.col1 {
clear:left;
float:left;
width:200px;
}

Seems to work, but obviously brings its own set of issues. This kind of question is a bit difficult to answer without working within the framework of the whole layout.

Answer 4

Paste this into your head tag.

p.s: the syntax highlighter hates me :) <style type="text/css" >

.col1, .col2 { display: inline-block; } .col1 { float: left; background: #ff0; clear: left; width: 200px; } .col2 { float: right; background: #f0f; clear: right; width: 200px; position: relative; top:-300px; right:0; } </style>