CSS Grid System for Forms (with Inline Labels)

Question

This is a follow up to this question, I'm trying to have the same multi-column format but with inline labels instead of block labels, take the following mockup for instance:

It's not very clear in the image but the name (label) + name (input) should occupy 50% (or near that) of the container width, the same goes for the email label + input, while the country (label) + country (select) should occupy 100% of the width.

I would like to have the same HTML / CSS used in the question mentioned above and change the appearance of the form by stylizing label elements with a class inlineLabel or blockLabel.

Is this possible?

PS: I'm sorry for being such a pain in the ass but form UIs is probably the most complex and important aspect of a web application one should care about, the whole set of form elements is also one of the most complex to stylize and I would like to put a end to this headache by creating a simple CSS "framework" to stylize forms in a simple manner.

Answer 1

Yes, it is possible. Are you looking for someone to code this up for you or just looking for some general direction? One way you could do it is float your labels to the left with some defined width. Your input boxes could then be floated right (or left) with some width (ie. 50%). The widths need to be defined in such a way that both can exist on the same level without overlapping (ie. add up to <= 100% of the space you have available).

Name and Email should exist in two columns, but the country and message line should not be as they extend through what you are defining as columns.

Answer 2

Why not subdivide you column into two columns for the Name and Email, use a reset div, then use 100% for the country select (assumes Grid960):

<div class="grid_10">
  <div class="alpha grid_5">
    Name <input id="Name" type="text"/>
  </div>
  <div class="omega grid_5">
    Email<input id="Name" type="text"/>
  </div>
  <div class="clear"/>
</div>
<div class="clear"/>
<div class="grid_10">

</div>