I have been practicing my skills in html, css, and javascript by working on a project I find quite useful - a recipe finder based on the recipes available at home. However, I am facing an issue with aligning certain elements on the html page.
The section of the html page that is causing confusion 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>
Here is a snippet from my css document:
html, body {
height: 100%;
min-height: 100%;
}
select{
width: 300px;
}
Due to all elements being within a form tag, they are displaying inline. I attempted to use a table for organizing the buttons, but it caused formatting issues where the first select appeared on one line, the table on another line, and the second select on yet another line.
This is how the current layout looks like:https://i.sstatic.net/8E67s.png
and this is the desired layout (as illustrated using paint):https://i.sstatic.net/qiQjM.png
I believe I could manage centering the buttons vertically within the form, but any assistance you could provide on that front would be highly appreciated!