html - Stacking select / option tags above each other -

i’m trying create simple page side bar has group of drop down boxes stacked above each other running down left side of page. vague example follows:

header----------------------------------> [drop down box1]  [drop down box1]       body  [drop down box1]  [drop down box1] 

i’ve got body , header parameters of side bar/header/body set. need figure out how stack these drop down boxes.

<div class="side-bar">   <select class="option-one">     <option>test</option>     <option>test</option>     <option>test</option>   </select>    <select class="option-two">     <option>test</option>     <option>test</option>     <option>test</option>   </select>    <select class="option-three">     <option>test</option>     <option>test</option>     <option>test</option>   </select>    <select class="option-four">     <option>test</option>     <option>test</option>     <option>test</option>   </select> </div> 

there few ways approach problem - can take pick:

1: unordered list

<div class="side-bar">  <ul class="select-elements">   <li>   <select>     <option>test</option>     <option>test</option>     <option>test</option>   </select>   </li>    <li>   <select>     <option>test</option>     <option>test</option>     <option>test</option>   </select>   </li>    <li>   <select>     <option>test</option>     <option>test</option>     <option>test</option>   </select>   </li>    <li>   <select>     <option>test</option>     <option>test</option>     <option>test</option>   </select>   </li>  </ul> </div> 

this put each select group on new line, abeit bullet points next them. remove bullets, add css:

select-elements li {     list-style-type:none; } 

2: line breaks

the unclosed <br> tag replaced line break in html. using <br> tags, sidebar code looks this:

<div class="side-bar">       <select>         <option>test</option>         <option>test</option>         <option>test</option>       </select><br>        <select>         <option>test</option>         <option>test</option>         <option>test</option>       </select><br>        <select>         <option>test</option>         <option>test</option>         <option>test</option>       </select><br>        <select>         <option>test</option>         <option>test</option>         <option>test</option>       </select><br> </div> 

3: display:block

with css, can tell element displays on it's own line block-level element:

side-bar select {     display:block; } 

hope helps!