HTML:div浮动不是水平对齐的

我在另一个分区中放置了两个分区：

<div id="outer_div">
    <div id="left_div">
        <!-- Buttons and text field -->
    </div>
    <div id="right_div">
        <!-- Buttons and drop list -->
    </div>
</div>

---

现在，当我这样做时，我希望左和右div分别位于屏幕的左侧和右侧，并且它们也将水平对齐。第一个是正确的，但是第二个希望不是正确的。如果我把left_div放在right_div上面，那么right_div按钮和下拉列表就在left_div下面的一行上。如果我把right_div放在left_div上面，div几乎在一行，但是right div稍微升高了一点，这样它就与它上面的div重叠了。

尝试为

外部div设置一个宽度

#outer_div {
    width: 100%; //or whatever width you would like it to be
}

#left_div, #right_div {
    width: 50%;
}

这是一个适合我的样品

<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>

还有小提琴：
你能提供一个JSFIDLE吗？是的，在我们看到你实际在做什么之前，这个问题是不可能回答的。这是样品？我觉得你的小提琴不错。你是说正确的div与黄色的母div不一致吗？那是我的小提琴。。。。不是那些没有改变任何事情的人。还是一样。我没有对内部div块中的按钮做任何操作，但它们都是内联的，而不是堆叠的。我不明白你的评论/问题？你能重新措辞吗？我以为div块的默认设置是垂直对齐窗口/父div的左边缘。但是，我没有对内部div块进行任何样式更改，它们不是垂直堆叠和左对齐，而是在同一行。请访问：www.jsfiddle.com，然后创造你想要解释的东西。您必须向我们展示您正在编写的代码——有许多问题可能会影响到这一点，简单地谈论也无济于事。我们需要查看代码
<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>

#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;
}