HTML Formatting Aligning Buttons in a Box - html

Question

I've been brushing up on html, css and javascript by working on a little project that I thought would be useful. It is a recipe finder based on what recipes I have in home. Anyways, my question is about lining up a few of the elements in the html page.
The part of the html page in question is:
<form>
<select size=10 id="first"></select>
<button type="button" id="addAll" onclick="rightAll()">
Add All
</button>
<button type="button" id="removeAll" onclick="leftAll()">
Remove All
</button>
<button type="button" id="add" onclick="right()">
>>
</button>
<button type="button" id="remove" onclick="left()">
<<
</button>
<select size=10 id="second"></select>
</form>
My css document:
html, body {
height: 100%;
min-height: 100%;
}
select{
width: 300px;
}
Because all the elements are in a form tag they all appear inline. I tried putting the buttons in a table, but the tables formatting put the first select on one line, the table on a new line, and the second select on a new line.
Here is what my formatting looks like now:
and here is what I want it to look like (thanks to paint)
I'm sure I could figure out how to center the buttons vertically in the form, but if you could help me out with that too then I would really appreciate it!

Answer 1

HTML
<form>
<div id="sel1">
<select size=10 id="first"></select>
</div>
<div id="buttons">
<div id="buttons1">
<button type="button" id="addAll" onclick="rightAll()">
Add All
</button>
<button type="button" id="removeAll" onclick="leftAll()">
Remove All
</button>
</div>
<div id="buttons2">
<button type="button" id="add" onclick="right()">
>>
</button>
<button type="button" id="remove" onclick="left()">
<<
</button>
</div>
</div>
<div id="sel2">
<select size=10 id="second"></select>
</div>
</form>
CSS
html, body {
height: 100%;
min-height: 100%;
}
select{
width: 300px;
}
div {
float: left;
}
#buttons1, #buttons2 {
float: none;
text-align: center;
}
It is up to you to tweak paddings and margins to leave it at your desire.

Answer 2

you should use div if you want to extent your design further, table is not responsive directly and type of fixed layout with messy code , you may try use div and other css property .
anyway just for that middle section , you may try div inside your table td like this :
<div style="width:100%;">
<div style="width:50%;float:left;">
<button type="button" id="addAll" onclick="rightAll()">
Add All
</button>
<div>
<div style="width:50%;float:right;">
<button type="button" id="removeAll" onclick="leftAll()">
Remove All
</button>
<div>
<div style="clear:both;"></div>
</div>
<div style="width:100%;">
<div style="width:50%;float:left;">
<button type="button" id="add" onclick="right()">
>>
</button>
<div>
<div style="width:50%;float:right;">
<button type="button" id="remove" onclick="left()">
<<
</button>
<div>
<div style="clear:both;"></div>
</div>
Cheers !