Html: Create table of divs where row heigth are different

Question

How can I create a table of two columns, made by div's, where the row heights are not the same height. How can I do this with CSS for example?

This is wat I have:

XXXX YYYY
XXXX YYYY
     YYYY
     YYYY
     YYYY
ZZZZ
ZZZZ
ZZZZ

And this is what I want:

XXXX YYYY
XXXX YYYY
     YYYY
ZZZZ YYYY
ZZZZ YYYY
ZZZZ  

The X,Y and Z are divs with information. So div Z must be not in-line with the second column.

Maybe a simple question but I don't know how todo this. Thank you.

Answer 1

Look at rowspan and colspan. You could find a creative use of those to achieve your goal.

Answer 2

You can have the divs in the document in order X, Y, Z and then float X left, float Y right and float Z left. Remembering to set the widths of the divs of course.

Answer 3

  <table>
  <tr>
  <td>
     XXXX<br/>
     XXXX<br/>
     XXXX
  </td>
  <td rowspan='3'>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY<br/>
     YYYY
  </td>
  </tr>
  <tr>
  <td rowspan='2'>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ<br/>
      ZZZZ
  </td>
  </tr>
  </table>

And than via css vertical-align:top for the td element

Assign div around each set of data if you want specific heights.