title: Two colored navigation bar
body: <p>I want to do a navigation bar like in this picture.</p>
  
  <p><img src="https://i.stack.imgur.com/Ynr66.png" alt="The bar has two colored div">
  The bar has two colored div. But the content of this divs must be in a wrapper, like the other contents of the page, but i don't know how to do it.
  The navigation bar must be fixed, but i think it's not important now.</p>
  
  <p>Edit:
  <a href="http://jsfiddle.net/2NA8V/" rel="nofollow noreferrer">http://jsfiddle.net/2NA8V/</a>
  My working code:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;div id="headerLogo"&gt;
          &lt;h1&gt;
              &lt;a href="index.php"&gt;
                  &lt;img src="..." class="headerImage"&gt;
              &lt;/a&gt;
          &lt;/h1&gt;
          &lt;ul&gt;
               &lt;li class="mainMenuPoint"&gt;Szurkolói Klub&lt;/li&gt;
               &lt;li class="mainMenuPoint"&gt;Tagoknak&lt;/li&gt;
               &lt;li class="mainMenuPoint"&gt;Meccsnaptár&lt;/li&gt;
               &lt;li class="mainMenuPoint"&gt;Történelem&lt;/li&gt;   
               &lt;li class="login"&gt;
                  &lt;a href="admin/admin.php" class="adminlink"&gt;Admin terület&lt;/a&gt;
                  &lt;p&gt;Helló &lt;a href="profile.php" class="profileLink"&gt;Bergkamp&lt;/a&gt;!&lt;/p&gt;
                  &lt;input type="button" name="logout" value="Kilépés" onclick="location.href='logout.php'" class="logout button"&gt;
               &lt;/li&gt;              
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>style:</p>
  
  <pre><code>nav {
      width:  100%;
      margin: 0 0 0 0;
      background: #d90000;
      background: -moz-linear-gradient(left,  #d90000 0%, #b20000 50%, #eee 60%);
      background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d90000), color-stop(50%,#b20000), color-stop(60%,#EEE));
      background: -webkit-linear-gradient(left,  #d90000 0%,#b20000 30%, #eee 60%);
      background: -o-linear-gradient(left,  #d90000 0%,#b20000 30%, #eee 60%);
      background: -ms-linear-gradient(left,  #d90000 0%,#b20000 30%, #eee 60%);
      background: linear-gradient(to right,  #d90000 0%,#b20000 30%, #eee 60%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d90000', endColorstr='#b20000',GradientType=1 );
  
  }
  #headerLogo {
      width: 950px;
      height: 42px;
      text-align:left;
      margin: 0 auto;
  
  }
  #headerLogo h1 {
      float: left;
  }
  #headerLogo h1 a{
      padding-left: 30px;
  }
  .headerImage {
      padding-top: 5px;
      padding-left: 5px;
  }
  nav ul {
      height: 42px;
      float: right;
      margin: 0 auto 0 0; 
      background-color: #EEE;
      width: 757px;
  }
  nav ul li {
      float: left;
      margin: 0px 10px;
      position: relative;
      height: 32px;
      padding-top: 12px;
  }
  .mainMenuPoint {
      color: #cb0000; 
      font-family: 'BebasNeueRegular';
      font-size: 120%;
      cursor: pointer;
      position: relative; 
  }
  nav ul .login {
      padding-top: 5px !important;
      position: relative; 
  }
  nav ul .login a, nav ul .login input, nav ul .login p {
      float: left;
      font-size: 80%;
  }
  nav ul .login a {
      font-size: 110%;
      padding-top: 7px;
  }
  nav ul .login p {
      font-family: 'BebasNeueRegular';
      padding-top: 8px;
      margin: 0 15px 0 30px;
      font-size: 100%;
      color: #CB0000;
  }
  .profileLink {
      float: none !important; 
      font-family: 'BebasNeueRegular' !important;
      padding-top: 8px !important;
      margin: 0 3px 0 3px !important;
      font-size: 100% !important;
      color: #CB0000 !important;
  }
  nav ul .login .loginForm {
      padding-top: 0px;   
  }
  nav ul li:first-child {
      margin-left: 20px;  
  }
  nav ul li a {
      font-family: 'BebasNeueRegular';
      text-transform:uppercase;
      color: #CB0000;
      font-size: 110%;
  }
  .logout {
      width: 60px;    
  }
  </code></pre>
  
  <p>It's working great, but i don't like this solution. I think it could be much easier.</p>