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: layout draft of questionnaire

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>

    CSS Howto..

    How to get overlay to fill scrollable parent using pure CSS?

    How do I add or change the class attribute of a JSF dataTable (primefaces)?

    How to style form submit button in CSS?

    How to “reset” style in view page, set in css file

    how to define multiple classes' hover event in css?

    How to select the first element of n>4 elements with CSS only?

    How do I get spotlight/shadow position to remain exactly same relative horizontal center position regardless of zoom?

    How to calculate rotation angle from rectangle points?

    How can i dynamically change title of input type file?

    How do I insert an image in HTML so that its fills up the entire screen regardless of screen size?

    how to use namespaces in css?

    How to position images next to text using CSS

    How to nest classes in css modules and react?

    How to add a CSS style to a specific node using Greasemonkey? [closed]

    How to create a layout with 2 menu bars in css?

    How to add css to dynamic div Id

    show a website loading image using only CSS (not Javascript or jQuery)

    How to set different body background color for different pages in one css files?

    How to create an integrated row in the table?

    How to get the CSS left-property value of a div using JavaScript?

    How to debug the different behavior of the same browser on the different platforms?

    How to set css style to asp.net button?

    How to show a div on click of an li element using css?

    How to create a multiple-row section with auto-sized columns

    How to get page content to stretch and stick footer to bottom of page?

    How Do I Make Li Clickable for Radio Button Inside

    How to make transition effect on css sprite hover

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

    How to target a specific div out of 4 divs with the same class with CSS

    How can I rotate(or change) background image using CSS and Javascript