views:

48

answers:

4

Want some handy guidelines prior starting the HTML Prototype of this application. Please find below the mockup screen.

Mockup screen

I need to make this structurewith liquid layout so that it will adjust as per the resolution.

Please do suggest me should i go with DIV with floating left or can i use tables to achieve this structure?

Thanks Lokesh Yadav

A: 

Personally, I'd build that in divs. I'd have a formrow div, then contain each of the columns in left floated divs with a specified width.

DavidYell
but if i specify width in %, then on going to higher res say 1280x768, the structure is looking a bit distorted like margin in between the fields increases.Should i make everything floating left so that layout will always maintain its structure without distorting margins?
Lokesh
Your entire form should be contained, I would never float stuff inside a % width element, you're just asking for trouble.
DavidYell
+2  A: 

Seems like a good div approach to me. Floats seem to be the typical way to achieve this, but I've personally always found display: inline-block as an extremely helpful tool to implement these sorts of layouts.

Ryan Brunner
i think, you are very much right. I must follow your approach, but will the layout be flexible with any resolution. As i tried earlier with table structure, whole layout seems to get distorted on higher resolution say 1280x768.Please suggest
Lokesh
+1  A: 

Using table would be much easier. Forms are naturally tabular. Never seen a form that is non-tabular.

the whole table vs div is totally overblown. I do agree that it's not a good idea to use tables for designing layouts but it's what it was back in the old days where CSS support was limited.

however for those to go far to declare forms to be table-less is going too far. All forms are naturally tabular and by doing it in table, you actually reinforce its tabular structure.

We can argue that we should not use tables for calendar since technically, a calendar is tabular for OUR convenience, not because the dates themselves are tabular!

netrox
A: 

I think:

  • the optimal way is to use a DIV with floating but its harder to code because you want a table-style and you must calc the exact width of any div (in pixel or percent).

  • the easyer way is to use TABLES with colspan.

Floyd