Inline div acts like block when containing block input buttons_问答_开发者

I'm not great with CSS, but I want to create two select lists with a button panel between them to control the movement of selected items back and forth. I want it to look like this:

+----------------------+-+       +----------------------+-+
|                      | |  ___  |                      | |
|                      | | |_>_| |                      | |
|                      | |  ___  |                      | |
|                      | | |_<_| |                      | |
|                      | |       |                      | |
|______________________|_|       |______________________|_|

I have the following HTML:

<div id='recipientSelection'>
    <div class='clientsBox'>
        <select id='allClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='>' />
        <input type='button' id='removeButton' value='<' />
    </div>
    <div class='clientsBox'>
        <select id='chosenClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
</div>

And the following CSS:

div#recipientSelection {
    margin-left: 50px;
    width: 90%;
}

select#allClients {
    width: 25%;
}

select#chosenClients {
    width: 25%;
}

div.clientsBox {
    display: inline;
}

div#clientButtons {
    display: inline;
    width: 15%;
}

input#appendButton {
    display: block;
}

input#removeButton {
    display: block;
}

If I make the buttons block elements, their containing div starts acting like it's a block element too. I want the buttons to be block elements 开发者_C百科relative to each other, but I want the button panel to flow inline with the selects. I suspect there's something important I don't understand here. Help?

Block-level elements are not allowed within inline elements
Usually one would float the three boxes one after the other keeping them blocks

div.clientsBox {
    float: left;
}

div#clientButtons {
    float: left;
    width: 15%;
}

I was able to accomplish the desired look with the following code. Not sure if you were trying to stay away from floats or what not, but this does work

CSS:

    div#recipientSelection {
        margin-left: 50px;
        width: 90%;
    }

    select#allClients {
        width: 100%;
    }

    select#chosenClients {
        width: 100%;
    }

    div.clientsBox {
        float:left;
        width: 30%;
    }

    div#clientButtons {
        float:left;
        width: 4%;
        margin-left:20px;
    }

HTML

<div id='recipientSelection'>
    <div class='clientsBox' style="clear:left;">
        <select id='allClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='&#62;' /><br />
        <input type='button' id='removeButton' value='&#60;' />
    </div>
    <div class='clientsBox' style="clear:right;">
        <select id='chosenClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
</div>

<html>
<head>
<style>
#recipientSelection{width:300px}
.clientsBox{width:40%}
#clientButtons{width:20%}
.clientsBox,
#clientButtons{display:block;float:left}
#clientButtons{text-align:center}
</style>
</head>
<body>
<div id='recipientSelection'>
    <div class='clientsBox'>
        <select id='allClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='>' />
        <input type='button' id='removeButton' value='<' />
    </div>
    <div class='clientsBox'>
        <select id='chosenClients' size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
</div>
</body>
</html>

There is a CSS property display: inline-block, but is is not supported by all browsers. With this slightly updated code

<div id='recipientSelection'>
    <div id='allClients'>
        <select size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='chosenClients'>
        <select size='5'>
            <option>dfsdfs</option>
            <option>sdfsdfds</option>
            <option>fsdfsdfsdfsdf</option>
            <option>dsf dsfsdfsdf</option>
            <option>afaf</option>
            <option>t</option>
            <option>sdgfhgsfh</option>
        </select>
    </div>
    <div id='clientButtons'>
        <input type='button' id='appendButton' value='>' /><br/>
        <input type='button' id='removeButton' value='<' />
    </div>
    <div style="clear: both"></div>
</div>

You can use this valid CSS to show what you want

div#recipientSelection { width: 90%; margin: 0 auto; text-align: center; }
div#allClients { width: 25%; float: left; }
div#chosenClients { width: 25%; float: right; }
div#allClients select, div#chosenClients select { width: 100%; }
div#clientButtons { display: block; width: 15%; text-align: center; margin: 0 auto; }