Header Design - Ex 1

by audetwebdesign

HTML

<h3>Example 1 - float left and right elements</h3>
<header class="ex1">
    <div class="header-left">the left stuff </div>
    <div class="header-right">the right stuff</div>
    <div class="logo"><img src="http://placehold.it/409x138" ></div>
</header>

CSS

header {
    border: 1px solid blue;
    width: 100%;
    min-width: 800px;
    height: 160px;
    overflow: auto;
}
.ex1 .header-left {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    background-color: gray;
    float: left;
}
.ex1 .logo {
    width: 409px; /* width of the logo */
    margin:10px auto 0 auto;
    border: 1px solid red;
}
.ex1 .logo img {
    display: block;
}
.ex1 .header-right {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    background-color: gray;
    float: right;
}