Page Widget How to - Float header parts

Question

We would like to know how to float header parts.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.top_wrapper {<!-- w  ww.  j  av a  2 s .  c o m-->
  background: none repeat scroll 0 0 #FFFFFF;
  height: 60px;
  position: fixed;
  width: 100%;
}

.top {
  margin: auto;
  width: 970px;
  overflow: auto; /* to contain the floats within the parent block */
}

.logo {
  margin-top: 15px;
  width: 250px;
  float: left; /* float the logo to the left also */
}

.menu {
  float: right;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: 20px;
  text-transform: uppercase;
}
</style>
</head>
<body>
  <div class="top_wrapper">
    <div class="top">
      <div class="logo">
        <img src="http://placehold.it/50x50">
      </div>
      <div class="menu">right side content goes here</div>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: