HTML: div floats are not horizontally aligned - html

Question

I have two divs that I've placed inside another div:
<div id="outer_div">
<div id="left_div">
<!-- Buttons and text field -->
</div>
<div id="right_div">
<!-- Buttons and drop list -->
</div>
</div>
My style sheet includes the following:
#left_div {
float:left;
}
#right_div {
float:right;
}
Now, when I do this, I expect that the left and right div will be on the left and right of the screen, respectively, and that they will be aligned horizontally as well. The first holds true, however, the second hope is not true. If I put left_div above right_div, the right_div buttons and drop list are on a line below the left_div. If I put right_div above left_div, the divs are almost in line, but the right div is slightly elevated, so that it overlaps a div that is above it.

Answer 1

Try setting a width to your outer_div
#outer_div {
width: 100%; //or whatever width you would like it to be
}
#left_div, #right_div {
width: 50%;
}

Answer 2

here is a sample that works fine for me.
<div id="outer_div">
<div id="left_div">
<div class="button"></div>
<div class="button"></div>
</div>
<div id="right_div">
<div class="button"></div>
<div class="button"></div>
</div>
</div>
and css
#outer_div
{
overflow: hidden;
width: 450px;
background: yellow;
}
#left_div {
float:left;
width:200px;
height: 200px;
border: thin red solid;
}
#right_div {
float:right;
width:200px;
height: 200px;
border: thin blue solid;
}
.button {
width: 75px;
height: 25px;
margin: 5px;
border: thin green solid;
}
and the fiddle: http://jsfiddle.net/cMhpK/