如何將導航引導至屏幕右側？

Question

我無法將我的導航菜單放在屏幕右側。我用了很多CSS，但是很難找到我的錯誤。

這是我的html代碼：

<div id="main-container"> 
     <div id="content"> 
      <div id="header"> 
       <ul id="nav"> 
        <li ><a href="#">Nav 1</a></li> 
        <li><a href="#">Nav 2</a></li> 
        <li class="selected"><a href="#">Nav 3</a></li> 
        <li><a href="#">Nav 4</a></li> 
       </ul> 
      </div> 
      <div id="pictures"> 
      </div> 
     </div> 

這是CSS我有麻煩：

#main-container { 

    } 
    #content { 
     background-color: #FFAA00; 
     background: url(images/table-surface-2-resized.jpg) repeat-x #000000; 
     width: 800px; 
     height: 600px; 
     border-radius: 5px; 
    } 
    #header { 
     background-color: #FFD200; 
     width: 800px; 
     height: 26px; 
    } 
    #pictures { 
     background-color: #A64D00; 
     width: 760px; 
     height: 540px; 
     border: 2px solid white; 
     border-radius: 15px; 
     margin-left: auto; 
     margin-right: auto; 
     margin-top: 14px; 
    } 

    /* TABS WITH ROUND, OUT BORDERS */ 
    #nav { 
     text-align: center; 
     list-style: none; 
     margin: 0; 
     padding: 0; 
     line-height: 24px; 
     height: 26px; 
     overflow: hidden; 
     font-size: 12px; 
     font-family: verdana; 
     position: relative; 
      } 
    #nav li { 
     border: 1px solid #AAA; 
     background: #D1D1D1; 
     background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
     background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
     background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
     background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
     background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%); 
     display: inline-block; 
     position: relative; 
     z-index: 0; 
     border-top-left-radius: 6px; 
     border-top-right-radius: 6px; 
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF; 
     text-shadow: 0 1px #FFF; 
     margin: 0 -5px; 
     padding: 0 20px; 
    } 
    #nav li.selected { 
     background: #FFF; 
     color: #333; 
     z-index: 2; 
     border-bottom-color: #FFF; 
    } 
    #nav:before { 
     position: absolute; 
     content: " "; 
     width: 100%; 
     bottom: 0; 
     left: 0; 
     border-bottom: 1px solid #AAA; 
     z-index: 1; 
    } 
    #nav li:before, 
    #nav li:after { 
     border: 1px solid #AAA; 
     position: absolute; 
     bottom: -1px; 
     width: 5px; 
     height: 5px; 
     content: " "; 
     } 
    #nav li:before { 
     left: -6px; 
     border-bottom-right-radius: 6px; 
     border-width: 0 1px 1px 0; 
     box-shadow: 2px 2px 0 #D1D1D1; 
    } 
    #nav li:after { 
     right: -6px; 
     border-bottom-left-radius: 6px; 
     border-width: 0 0 1px 1px; 
     box-shadow: -2px 2px 0 #D1D1D1; 
     } 
    #nav li.selected:before { 
     box-shadow: 2px 2px 0 #FFF; 
    } 
    #nav li.selected:after { 
     box-shadow: -2px 2px 0 #FFF; 
    } 

    #nav a { 
     color: black; 
     text-decoration: none; 
    } 
    /* END TABS WITH ROUND, OUT BORDERS */ 

Answer 1

嘗試這個CSS（加）

#nav { 
    padding: 0 10px; 
    float:right; 
} 

這裏工作link

Answer 2

修正：http://dabblet.com/gist/3435951

浮動#nav的權利，給它一個合適的餘量，從中取出overflow: hidden，並將其添加在#header。