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

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>