Steve Pulse Steve Pulse - 2 months ago 6
CSS Question

HTML Formatting Aligning Buttons in a Box

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()">
&lt;&lt;
</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:enter image description here

and here is what I want it to look like (thanks to paint)enter image description here

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!

Dez Dez
Answer

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()">
             &lt;&lt;
             </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.