Stackoverflow fiddle

http://stackoverflow.com/questions/36258110/css-floats-wont-work-in-header/36258231

by Ivo

HTML

<div class="container clearfix">
    <div class="head">
        <div class="brand">Brand Name</div>
        <div class="nav">Nav content Here</div>
    </div>
</div>

CSS

.container{
    width:100%;
    margin:10% auto;
    border: 1px solid red;
}
.head{
    float:left;
    width:100%
}
.brand{
    float:left;
    margin:0 3%;
    width:auto;
}
.nav{
    float:right;
    margin:0 3%;
    width:auto
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */