CODEWITHSUNDEEP
htmlcsslayout
michi
michi

Reputation: 6625

how to arrange divs with css as a grid?

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?

Upvotes: 1

Views: 10158

Answers (4)

Navin Rauniyar
Navin Rauniyar

Reputation: 10525

1. <table> or <div>, regarding my requirements above, what would you prefer?

div is specially used for layout of the page and table is specially used for placing tabular data. so in your condition I would choose the table layout for the questionnaire.

2. is there some magic tool to make this nice and easy?

First dream to design how should this row data look then only accomplish for the site.

3. would you rather serve the raw data and let a client-side script (jQuery) do the positioning instead?

This is not good idea but if the clients need so you could do that.

And one more thing, you are not asking for your problem with SO but asking what we like, this is not good practice for SO users.

Upvotes: 0

Tiberiu C.
Tiberiu C.

Reputation: 3513

  1. In my opinion <table> is for tables <div> is for layout.
  2. Yes there are some style templates usually named grid system or css grid take a look at this stack : https://stackoverflow.com/questions/76996/what-is-the-best-css-grid-framework
  3. I wont arrange elements around with JavaScript unless it can't be done with css or is a special requirement from the marketing guys. The con about this is that you increase the page render time.

Take a look at this fiddle made with a custom 960 grid system that have 6 columns with the width 150px

Fixed width: http://jsfiddle.net/UjXPR/

Fluid width: http://jsfiddle.net/UjXPR/1/

960 gs customizer: http://grids.heroku.com/

Upvotes: 1

Alex
Alex

Reputation: 834

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>

Upvotes: 3

Kulikov Alexei
Kulikov Alexei

Reputation: 139

Checkout bootstrap grid system

Upvotes: 0

Related Questions