title: Tabs bar in header aligned to right. Support for all browsers issue
body: <p>I would like to get something like here
  <img src="https://i.stack.imgur.com/Aretc.png" alt="enter image description here"></p>
  
  <p>I coded it like this
  HTML:</p>
  
  <pre><code>            &lt;header&gt;
              &lt;div id="logo"&gt;
  
                  &lt;form id="login" action="/login" method="post"&gt;
                      &lt;div&gt;
                          &lt;label&gt;
                              Login: &lt;input type="text" name="username" value=""&gt;
                          &lt;/label&gt;
  
                          &lt;label&gt;
                              Password: &lt;input type="password" name="password" value=""&gt;
                          &lt;/label&gt;
                          &lt;input type="submit" name="login" value="Log In"&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
  
                  &lt;nav&gt;
  
                      &lt;ul&gt;
                          &lt;li class="active"&gt;
                              &lt;a href="/"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/page_1"&gt;Some link&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
  
                              &lt;a href="/page_2"&gt;Some link&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;  
              &lt;/div&gt;          
              &lt;div id="under_menu"&gt;
                  &lt;nav&gt;
  
                      Location:
                      &lt;ul&gt;
  
                          &lt;li&gt;
  
                              &lt;a href="/"&gt;Home&lt;/a&gt;
  
                          &lt;/li&gt;
  
                      &lt;/ul&gt;
                  &lt;/nav&gt;
                  &lt;form id="search" action="/search" method="post" onsubmit="this.form.submit();"&gt;
                      &lt;div&gt;
  
                          &lt;input type="text" name="search_query" value="Search"&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/header&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>#logo {
      background:#fff url('./gfx/logo.png') no-repeat;
      overflow:hidden;
  }
  
  #login {
      color:#999;
      float:right;
      font-size:0.9em;
      padding-top:5px;
  }
  
  #logo nav {
      clear:both;
      float:right;
      padding-top:30px;
  }
  
  #search {
      float:right;
      padding:4px 0;
  }
  
  #logo nav ul {
      list-style:none;
      padding:8px 0;
  }
  
  #logo nav li {
      color:#444;
      cursor:pointer;
      display:inline;
      font-size:1.2em;
  }
  
  #logo nav li a {
      color:#777;
      padding:9px 12px;
  }
  
  #logo nav .active a {
      background:#1181ce;
      color:#fff;
  }
  
  #logo nav li:hover a {
      color:#1181ce;
  }
  
  #logo nav .active a:hover {
      color:#fff;
  }
  
  #under_menu {
      background:#f0f0f0;
      border-top:2px solid #1181ce;
      height:100%;
      overflow:hidden;
      padding:0 9px;
  }
  
  #under_menu nav {
      float:left;
      padding:8px 0;
  }
  
  #under_menu nav ul { display: inline; list-style: none; }
  #under_menu nav li { display: inline; }
  </code></pre>
  
  <p>and with these code it looks in browsers like:</p>
  
  <p>Firefox:
  <img src="https://i.stack.imgur.com/h0fDT.jpg" alt="enter image description here"></p>
  
  <p>Google Chrome:
  <img src="https://i.stack.imgur.com/ZSTGb.jpg" alt="enter image description here"></p>
  
  <p>I've tried to fix it for days, but I don't have any idea already. What do you think about the issue?</p>