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!
Four spans, one after the next, correspond to your original elements. Set each span to have display:inline-block.
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/