Question

I am trying to create a control which contains two listboxes with add/remove buttons to move items from one list to the other. Typically I would do this using a table, but I am trying to follow css standards and use divs.

I have the listboxes aligned perfectly, but I can’t figure out how to set up the buttons between them.

This is my html (updated to show rendered html):

<div id="dealsummary-ladderlist">    
    <form action="/Reporting/DealSummaryComparison" method="post">    
        <div id="available">
            <div><strong>Available</strong></div>
            <div id="available-items">
                <select id="ItemsToSelect" multiple="multiple" name="ItemsToSelect" size="30">
                    <option value="16">Item 1</option>
                    <option value="17">Item 2</option>
                    <option value="21">Item 3</option>
                    <option value="22">Item 4</option>
                    <option value="23">Item 5</option>
                    <option value="24">Item 6</option>
                    <option value="25">Item 7</option>
                </select>
            </div>
        </div>
        <div id="add-remove">
            <div><input type="button" value=">>" /></div>
            <div><input type="button" value="<<" /></div>
        </div>
        <div id="selected">
            <div><strong>Selected</strong></div>
            <div id="selected-items">
                <select id="ItemsToDeselect" multiple="multiple" name="ItemsToDeselect" size="30"></select>
            </div>
        </div>
        <div style="clear:both;"></div>

        <br /><br />

        <center>
            <p>
                <input type="submit" value="Generate Report" />
            </p>
        </center>
    </form>
</div>

This is what I have for css:

#add-remove {
    /* want to center on page */
    float: left;
    width: 10%;
}

#add-remove div {
   /* want to add even spacing between buttons */
}

#available {
    float: left;
    width: 45%;
}

#selected {
    float: right;
    width: 45%;
}

#available #available-items,
#selected #selected-items {
    margin: 1em 0 0 0;
}

#available #available-items select,
#selected #selected-items select {
    width: 100%;
    font-size: 10pt;
}

How would I achieve the centering and even spacing of the arrow buttons using css?

Answer 1

If you know the precise width and height of the <div id="add-remove"> element, you could wrap the whole thing in a relatively-positioned <div> and use absolute positioning with negative margins like so:

<div id="relativeWrapper"> <!-- added this -->
    <div id="available">
        <!-- ... snip ... -->
    </div>

    <div id="add-remove">
        <div><input type="button" value=">>" /></div>
        <div><input type="button" value="<<" /></div>
    </div>

    <div id="selected">
        <!-- ... snip ... -->
    </div>

    <div style="clear:both;"></div>
</div>
<!-- ... etc ... -->

With the CSS:

div#relativeWrapper {
    position: relative;
}

div#add-remove {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    margin-left: -40px;
    height: 64px;
    margin-top: -32px;
}

Setting both top and left to 50% and margin-left to half the value of width and margin-top to half the value of height will horizontally and vertically center an absolutely-positioned element within its relative parent.

Vertical-centering is difficult to achieve; you can use display: inline-block; vertical-align: middle;, but inline-block is not supported by all browsers. Alternatively, using display: table-cell; vertical-align: middle; tends to work.

Incidentally, the <center> element is deprecated. Use <div style="text-align: center;"> or simply <p style="text-align: center;"> instead.