Somehow you find yourself in the awkward position of having to create a header on one control above your content, which is in a another, separate control. My current example is content laid out in a series of views, and having to fake a header on the form. How do I get the faux “columns” to match up?

This might seem a small matter, but I bump into it from time to time. To address it, you might arrange a series of labels in a table row on your form or view. But how to make certain everything lines up, when SmartForms’ tendency is to use percentages instead of pixels?

I’ve two suggestions.

1. You might be inclined to create a cell in that table row for each column. Don’t — SmartForms will set those widths as percentages and you can’t override them. Consider instead adding all of your labels to a row with a single table cell.
   

2. Next — and here’s the secret sauce — for each of those labels, set the width of each LABEL to the same value as the width of the control beneath.

   If you’re making a column header that will reside above, say, a dropdownlist control, set the width of the dropdown in pixels — don’t forget the units! — and then set the width of the label to match.

   In the screenshot below, the width of the dropdownlist control is 250px.

   

   So, set the width of the label control to match — and don’t forget the units!

   

   Begin with the leftmost label, make sure the table row is left-aligned, and work your way through the rest of the labels. If you have some left- or right-padding on the controls, you’ll have to account for that in your label widths so they align correctly. When you’re done, you’ll have manufactured column headers that left-align perfectly with the controls below them.