CSS Floats

http://stackoverflow.com/q/26566293/1144203

by Ivan Sim

HTML

<div id="header">
    <p id="logo">Brandi<span id="line"> | </span><span id="tag">I'am your tag line</span></p>
    <ul id="nav">      
      <li><a href="#">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Works</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS

body {
    width: 100%;
    margin: auto;
    overflow: hidden;
}

#header {
    border: 1px solid black;
    background-color: lightblue;
    overflow: auto;
}

#logo {
    float: left;
    font-size: 28pt;
    font-family: Pacifico;
    color: black;
    padding: 0 100px;
}

#tag {
    font-family: Open Sans;
    font-style: Regular;
    font-size: 12pt;
    color: #666;
}

#line {
    color: deepskyblue;
    font-family: Open Sans;
    font-style: Regular;
    font-size: 20pt;
    padding: 0 20px;
}

#nav {
    list-style: none;
    padding: 30px 0;
}

#nav li{
    float: right;
}

#nav a {
    font-family: Open Sans;
    font-style: Regular;
    display: inline-block;
    text-decoration: none;
    padding: 0px 20px;
    color: black;
}

a:hover {
    border-bottom: 2px solid deepskyblue;
}