I'm struggling with CSS, but I have a vision of creating two select lists with a button panel in between to facilitate moving selected items back and forth. Here's a visual representation of what I am aiming for:
+----------------------+-+ +----------------------+-+
| | | ___ | | |
| | | |_>_| | | |
| | | ___ | | |
| | | |_<_| | | |
| | | | | |
|______________________|_| |______________________|_|
At the moment, my HTML setup looks like this:
<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>
This is accompanied by the following CSS styling:
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;
}
However, when I set the buttons as block elements, it affects the containing div as well. My intention is to have the buttons act as block elements only relative to each other while ensuring that the button panel remains inline with the selects. There seems to be a key understanding that I am missing here. Any insights or guidance on how to achieve this would be greatly appreciated.