Question

I was wondering if there is a way to setup a two-column layout with the following:

I have

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>


<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>


<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>



<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>



more....

I want the following:

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

more ....

I am not sure how to do this in CSS. Any ideas? Thanks so much!

Answer 1

http://jsfiddle.net/fZse3/

<style>
#col1, #col2 {
    float:left;
    width: 50%;
}
</style>


  <div id="col1">
     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>

     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>
  </div>

  <div id="col2">
     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>

     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>
  </div>​