I’ll confess that I arrived at 90% somewhat arbitrarily, doing a bit of trial and error in the browser window to see what looked best.

I’m not sure why Ethan chose not to use his formula here, if we do, we find that the 960px he needs works out to be 93.7% of 1024 pixels, whereas 90% would translate to a screen width of around 1066 pixels. If we are going to use his method accurately we need to use it from the outset otherwise our grid is wrong right from the beginning.

Allow Scrollbars

Another thing to consider is the vertical scrollbar. When clicking through from a shorter page to a longer one, the apperance of a scrollbar can cause a ‘jump’ in a sites central alignment which is quite undesirable. The generally accepted solution to this is to force the vertical scrollbar using an attribute of overflow-y: scroll; on the body element. However if we do that, we need to incorporate the reduction in page width of 17px to the formula so that we aren’t miscalculating our new ‘precise’ grid width. So we now have:

target / (context - 17px) = % When forcing a vertical scrollbar.

I’m keen to here if others have approached this problem, or can otherwise explain the reasoning behind the arbitrary 90% in the book.

Method one: The ordered list

The example mark up below uses an ordered list to give our form structure, we can use the <li> elements as rows to contain our <label> and <input> tags which we can then float or manipulate easily as blocks.

<ol>
  <li>
     <label for="fldFirstName">First Name</label>
     <input type="text" name="fldFirstName" id="fldFirstName" />
  </li>
  <li>
     <label for="fldSecondName">Second Name</label>
     <input type="text" name="fldSecondName" id="fldSecondName" />
  </li>
</ol>

The good thing about putting a form in an ordered list apart from it’s structural benefit is that a screen reader will declare the length of the list before reading it, giving the user some extra information about what they have ahead of them.

Method two: divs divs divs

Using the <div> element as a form row also gives us structure to play with and there’s more flexibility than with a list because there aren’t any rules about how we nest them. It could be argued however, that they are less meaningful.

<div>
  <label for="fldFirstName">First Name</label>
  <input type="text" name="fldFirstName" id="fldFirstName" />
</div>
<div>
  <label for="fldSecondName">Second Name</label>
  <input type="text" name="fldSecondName" id="fldSecondName" />
</div>

So what can I do using only HTML form elements?

In the following example our form is built using only form elements provided to us in HTML, each ‘row’ of our form is in fact our <label> element and inside it is our <input> element. Placing the input element inside of the label creates an implicit relationship between the pair, so no for or id attributes are required.

<label data-labelText="First Name">
  First Name
  <input type="text" name="fldFirstName" />
</label>
<label data-labelText="Last Name">
  Last Name
  <input type="text" name="fldLastName" />
</label>

In order to make this mark up present as we want it to, we need each part of it to behave like a styleable element. Our label (or ‘form row’) and input elements are no problem to style, but what about the label text itself.. how can we treat a text node like a block level element? We achieve this by using the :before pseudo class.

In the CSS below we start by hiding the label’s text using a combination of negative letter-spacing and negative text-indent. We use both of these styles to cover browser variations. The next step is to re-inject our label text using the :before pseudo class with a reference to the data-labelText via the attr selector, we are now able to treat the generated content like a block level element without using any extra structural mark up.

label {
  overflow: hidden
  display: block;
  margin-bottom: 15px;
  letter-spacing: -9999px;
  text-indent: -9999px;
}

label input {
  float: left;
  width: 70%;
  padding: 3px;
  letter-spacing: normal;
  position: relative;
}

label:before {
  display: block;
  float: left;
  width: 30%;
  padding-right: 10px;
  letter-spacing: normal;
  text-indent: 0;
  text-align: right;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  content: attr(data-labelText);
}

Here is a working example of a form using this ‘lean forms’ method. You may notice in the examples that I am mixing percentage widths with pixel paddings, I’m able to do this by using the box-sizing: border-box method explained here.

Support

• Internet Explorer 8+
• Opera
• Safari
• Firefox
• Chrome

ul.grid {
        overflow: hidden;
	list-style: none;
}

ul.grid li {
	float: left;
	width: 250px;
	margin: 0  15px 15px 0;
}

In the example above we need to remove the right hand margin from every third list item.

A not so uncommon solution

It’s not that uncommon to see this problem solved by the addition of a class to every third child of our list: <li class="last">. I have done this in the past and had complaints from back-end developers when it comes to integration with a CMS, for whatever reason it’s a pain in the arse, and a better solution is required.

A future solution

CSS3 offers a neat pseudo selector called nth-child which can target child elements based on index. The following code removes the right hand margin from every third list item.

ul.grid li:nth-child(3n+3) {
  margin-right: 0;
}

Unfortunately nth-child is not supported by by IE before version 9, so is not yet an option.

A simple, widely supported answer

In the following example the problem is solved by adding a negative right hand margin to the <ul> element. This does require that the parent element of your grid has the property of overflow:hidden;, if that’s not possible in your design, you can add a wrapper around your <ul></ul> with the overflow hidden property.

ul.grid {
	margin-right: -15px;
        overflow: hidden;
	list-style: none;
}

ul.grid li {
	float: left;
	width: 250px;
	margin: 0  15px 15px 0;
}

Here is the Working example.

Support

• Internet Explorer 7 / 8 / 9
• Opera
• Safari
• Firefox
• Chrome