ASP.Net - moving away from using absolute coordinates, inline css and ms_positioning="GridLayout"

With VS 2003 we were used to desing the web forms quite similarly to win forms: the Textboxes, Labes, Buttons etc. were positioned with absolute coordinates (inline css) in divs with ms_positioning="GridLayout".

With VS 2010 this way of designing web forms seems to be开发者_如何学编程 gone (at least it can no more be used to get the design finished quickly) and the use of absolute coordinates and inline css is considered obsolete anyway.

I would like to get some hints how to design web forms like the one in sample screenshot the "correct" way.

I would like to preserve following important things:

• One should be able to quickly / easily add, remove or move the form's controls while maintaining the overall look and feel of the form - our web forms tend to change / grow over time as customers' requirements change.
• The form should not crumple together when the user reduces the width of the browser window - the form width should not descend under some minimal value.

I am considering using html tables, but for example for the Address-Block on the sample screenshot I would have to have a table with 9 columns (one for every vertical boundary) and use lots of colspans - not neccessarily the fastest way of designing the forms considering future changes. And I heard in 1999 or so that the html tables were obsolete.

I read I should use divs and css for pretty much everything but I am unclear in how to create a web form like the one on the sample screenshot without providing absolute positions and sizes some way or other.

Any hints will be greatly appreciated.

Thanks in advance Best Regards Erich Horak

---

I would divide up your three main sections into divs, then tackle each section individually. My main tool when approaching this is the Web Dev Toolbar. I use it to view markup and CSS of any form I locate online that I like the look of:

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

(CSS -> View CSS and CSS -> View Style Information (hover mouse) are helpful drop down options)

Forms are created with CSS mainly through the use of label and input classes: http://speckyboy.com/2011/05/24/css-form-templates-tools-services/

Your form looks difficult at first glance, but when you break it down it really isn't that hard to do. The link above has samples - simple like you mentioned - but simple or not, the CSS is the same.