html multiple select inside div stretching entire page

Question

I have a buch of multiple select boxes and I wanted to line them up in a line across the page. I thought I could do this with the help of divs, but for some reason I am running into trouble. Each select is being stretched across the entire width of the page even though I specified in the css that I didn't want that. Why is this happening? Also, I am giving each select a title by just putting text on top of it. Is there a better way to make a title?

HTML

<div class='bold'>
            <div id="parameters">
                <div class="section">Program<br> <select multiple="multiple" name="program">
                            <option value="SGS">SGS</option>
                        </select>
                </div>      
                <div class="section">School <br><select multiple="multiple" name="school">
                            <option value="FLH">FLH</option>
                            <option value="MID">MID</option>
                            <option value="SUN">SUN</option>
                            <option value="MNC">MNC</option>
                        </select>
                </div>      
                <div class="section">Term <br><select multiple="multiple" name="term">
                            <option value="Fall 2011">Fall 2011</option>
                            <option value="Late Fall 2011">Late Fall 2011</option>
                        </select>
                </div>      
                <div class="section">Extension<br> <select multiple="multiple" name="ext">
                            <option>Something...</option>
                        </select>
                </div>      
            </div>
        </div>

CSS

#parameters{width:100%
        height:150px;
        border-style:solid;
        border-width:2px;
        border-color:grey;} 
.section{width:50px;}           

Answer 1

Divs are block elements so will stack on top of each other by default. If you want them to sit next to each other you will need to float them.

.section{
     float: left;
}   

JSFiddle

Answer 2

You can try:

.section {
  width: 50px;
  display: inline-block
}

This is an alternative to float to a degree. It may suit your needs better, but it's difficult to say. display: inline-block comes with rendering drawbacks, as does float of course.

I prefer it sometimes - A lot of people jump at float like it's the only choice, but it can be a real pain too.

JSFiddle sample using display rather than float

As you can see, it preserves your border without using a clearfix, whereas float breaks the border.

edit: If you choose to use float, a good method of making the border wrap around the contained elements is to add overflow: auto to #parameters, as shown in the fiddle below:

Float fiddle with clearfix

Answer 3

I changed your html code a bit in order to use labels in the "tittle" of each select tag.

You can view here: http://jsfiddle.net/SmRzL/4/

Answer 4

In regards to how to align, your elements you need to float each section:

.section{
    float: left;
    padding: 10px;
} 

In regards, to adding a title to each section personally I would do something along the lines of this:

<span class="title">Term </span> 

.title {
    display:block;
    font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
}

See this fiddle for reference: http://jsfiddle.net/8rQXD/