Test3 and Test7 display correctly, but all of the other items cause the drop down list to wrap to the next line, creating ugly scroll bars. The code for Test3, Test4, and Test5 is identical. The code for Test7, Test8, and Test9 are also identical. As you can see, the containing block (red) has plenty of room for all of the elements.

I've gone through the entire page hierarchy, adding zoom: 1 to each item in an attempt to trigger hasLayout, with no changes.

The goal here is to have three columns, with a single column of text beneath them.

Nicely done. I'm still curious on the "why" aspect of things, but I doubt that it's really possible to find out at this point. So far as a simpler layout goes, I'm open to suggestions. The two requirements that drove this one were: 1) Cells must be independent within the markup, and removing one must cause surrounding cells to adjust gracefully (most of these fields are hidden via server-side code) and 2) The "select" portion of each field may contain multiple items (for example, a text box and date picker), hence the use of the .content div. — AaronSieb over 8 years ago