how to arrange divs with css as a grid?

Tags: html,css,layout

Problem :

I want to present dynamically generated (PHP, XML) questionnaires to the user in the browser like this:

requirements:
1. The left column will will always be a number, the middle and the right column may swap position in some questionnaires.
2. There will be questionnaires with 200 items or so over multiple pages.
3. The width of the container (rounded corners) is fixed at 800px at this time, BUT
4. it has to be flexible / fluid in the near future for being displayed on mobile devices like iPad and iPhone

what I've tried
I experimented both with a <table> based and a <div> based layout:

The <table> was clean and simple, but with lots of overhead and not very flexible, e.g. if I swapped middle and right column for item #2 only...

The <div> based layout was sleeker, I let the containers float, but have to set the divs to a fixed width in order to get them align in columns. In a fluid design, I do not know the widths in advance, which will be a mess then...

questions to the pros:
1. <table> or <div>, regarding my requirements above, what would you prefer?
2. is there some magic tool to make this nice and easy?
3. would you rather serve the raw data and let a client-side script (jQuery) do the positioning instead?

---

Solution :

Here's a code example: http://codepen.io/anon/pen/inmwD

Either use a wrapping div or a list element

<div class="parent">
    <div class="row">
      <div class="col1">1</div>
      <div class="col2">Content</div>
      <div class="col3"><input type="radio"/></div>
    </div>
</div>