SO, Header with Left and Right

by acbabis

HTML

<div class="header">
    <div class="background">
        <div class="background-image background-left"></div>
        <div class="background-image background-middle"></div>
        <div class="background-image background-right"></div>
        <div style="clear: both"></div>
    </div>
    <div class="header-content">
        Header Text
    </div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
}

.header {
    background-color: blue;
    height: 50px;
    padding: 0;
    margin: 0;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    padding: 0;
    margin: 0;
}

.background-image {
    float: left;
    height: 50px;
}

.background-left {
    background-image: url('http://placehold.it/99x50');
    width: calc(50% - 15px);
}

.background-middle {
    background-image: url('http://placehold.it/30x50');
    width: 30px;
}

.background-right {
    background-image: url('http://placehold.it/100x50');
    width: calc(50% - 15px);
}

.header-content {
    position: relative;
}
}