How to create CSS columns for many to many select boxes?

Question

I've been tearing my hair out trying to convert a simple table layout to CSS! I'm sure I'm missing something (like a decent knowledge of CSS :)

In this form I have a many-to-many selection facility. The user can type values into a text box, matching values are displayed in the "Available" select box, and buttons exist to move options to/from the "Selected" select box.

The table layout is structured something like this:

<table>

<tr>

<td>Field Label</td>

<td>TEXT BOX<br />"AVAILABLE OPTION" SELECT BOX</td>

<td><-Button<br />Button-></td>

<td>"SELECTED" SELECT BOX</td>

</tr>

</table>

In other words, I want to have 4 columns as follows:

Column1 : Label

Column 2: A text box, with a Select box underneath

Column 3: Buttons for <- and ->

Column 4: a Select box.

I've left floated the label and given it a width, added the text box, a line break, a margin on the select box, but how do I create the next column with the buttons, and the final column with the final select?

Any help would be gratefully received!

Answer 1

Four spans, one after the next, correspond to your original elements. Set each span to have display:inline-block.

Answer 2

I usually handle this with a list node, but pretty much any of the usual node types will do (div, span, etc). The idea is to create a container element for each column and float each left. Add an overflow:hidden to the container element (in this case, the ul) so that browsers will properly calculate the height of the floated elements nested inside. The display:inline on the floated li's fixes an ie6 double margin bug. http://jsfiddle.net/brianflanagan/QU2HB/