如何并排创建4个div？

Question

我正在尝试创建一个标题窗格，就像您在stackoverflow页面顶部看到的那样，带有一个图标，然后一个页面标题，都向左对齐，然后两个图标向右对齐。我使用的方法（可以让我对一个更好的方法有所启发）是一个div，其中包含4个div。请参阅下面的HTML和CSS代码段。

HTML

<div id="headerDiv">
    <div id="menuButtonDiv"><image src="resources/icons/menu.png" /></div>
    <div id="headerTitleDiv">
        <h1 style="padding-top: 6px">
            <ui:insert name="title">Default Title</ui:insert>
        </h1>
    </div>
    <div id="userButtonDiv"><image src="resources/icons/user.png" /></div>
    <div id="settingsButtonDiv"><image src="resources/icons/settings.png" /></div>
</div>

CSS

#headerDiv {
    margin-left: 0.5%;
    background-color: #00467e;
    color: white;
    width: 99%
}

#menuButtonDiv {
    float: left;
    background-color: #00467e;
    height: 50px;
    width: 50px;
}

#userButtonDiv {
    float: right;
    background-color: #00467e;
    height: 50px;
    width: 50px;
}

#settingsButtonDiv {
    float: right;
    background-color: #00467e;
    height: 50px;
    width: 50px;
}

#headerTitleDiv {
    vertical-align: middle;
    background-color: #00467e;
    height: 50px;
    margin-left: 75px;
}

但是，由于某些原因，右侧的两个按钮将换行。见下图：

我在做什么错？！

Answer 1

要使它们正确浮动，只需更改元素的顺序。浮动元素总是先于没有跳动的元素

<div id="headerDiv">
    <div id="menuButtonDiv"><image src="resources/icons/menu.png" /></div>
    <div id="userButtonDiv"><image src="resources/icons/user.png" /></div>
    <div id="settingsButtonDiv"><image src="resources/icons/settings.png" /></div>
    <div id="headerTitleDiv">
        <h1 style="padding-top: 6px">
            <ui:insert name="title">Default Title</ui:insert>
        </h1>
    </div>        
</div>