Question

I have this scenario. I need to show 3 list boxes on a ASP.NET web page. List box A would have all the options on page load and list boxes B, C would be empty.

I want to align all three such that I can select items from A to B and A to C. So, A would be shown as a bigger listbox with B, and C as smaller boxes on to its right such that B and C are vertically aligned. Of course B and C would have their respective set of ‘Add’, ‘Add all’, ‘Remove’, ‘Remove All’ buttons.

--------------            --------------
|            |            |            |
| ListBox A  | >  >> << < | ListBox B  |
|            |            |            |
|            |            --------------
|            |            --------------
|            | >  >> << < | List Box C |
|            |            |            |
--------------            --------------

Please point me to the appropriate css style examples.

cheers

Answer 1

does following design helps you?

<div style="border: solid 1px red; width: 650px;">
    <div style="border: solid 1px blue; float: left; height:400px; width: 200px;">
        ListBox A</div>
    <div style="border: solid 1px blue; float: left; height:400px; width: 200px">
        <div style="padding-top:40%; vertical-align:middle; width: 200px;">
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&lt;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div style="padding-top:90%; width: 200px;">
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&lt;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </div>
    <div style="border: solid 1px blue; float: left; height:400px; width: 200px;">
        <div style="border: solid 1px black; height:200px; width: 200px">
        ListBox B
        </div>
        <div style="border: solid 1px black; height:200px; width: 200px">
        ListBox C
        </div>
    </div>
    <div style="clear: left;">&nbsp;
    </div>
</div>