Как создать 4 деления рядом?

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>