inline-block

This is probably old hat to css veterans, but, for someone like myself who last did hardcore html work in days of tables, it was a neat trick for me to learn.  On our login page the user is asked to select their location within the hospital.  To start out with, we had a simple selection list with all of the locations.  But, for improved usability, the actual design called for the locations to be grouped into three columns. I was prepping myself for an alignment nightmare when Alex showed me that it could be done simply by setting the "display" attribute to "inline-block".  This allows you to set each element as a fixed width, and, tada, you end up with aligned columns.

To get this...

... all we had to do was this...

<div id="sessionLocation">
       <% locations.each { %>
             <span class="locationOption" value="${it.id}">${ui.format(it)}</span>
       <% } %>
</div>


and

.locationOption {
    display: inline-block;
    font-size: 1em;
    padding: 3px 15px;
    width: 250px;
}

(Then you can just use some simple javascript to mimic selection list functionality)

I found a good article that discusses inline-block in greater detail:

What’s the Deal With Display: Inline-Block?

All right, I'm going to head back to work on the API now and stay out of the web layer as much as possible... :)