ulとliを整列からdivを押し出す

左と右の辺が垂直に揃えられたdivをすべて持っていますが、ulとliを追加すると、自分の.navが右手を超えて背景色を持ち始めましたエッジ。どのようにこれをロックするか考えていますか？最大幅が外側に流れるのを妨げない。ulとliを整列からdivを押し出す

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> 

<title></title> 
</head> 

<body> 

<div class="container"> 

    <div class="header"> 

    <img src="image/logo.png" width="155" height="110" alt="Big Box Property Preservation" /> 

    </div> 

    <div class="navContainer"> 


     <div class="miniNav"> 

     <img src="image/link_banner.nav.png" width="189" height="44"/> 

     </div> 

     <div class="nav"> 
      <ul class="nav"> 
       <li><a href="URL" alt="HOME">HOME</a></li> 
       <li><a href="URL" alt="ABOUT US">ABOUT US</a></li> 
       <li><a href="URL" alt="OUR SERVICES">OUR SERVICES</a></li> 
       <li><a href="URL" alt="CONTACT US">CONTACT US</a></li> 
      </ul> 
     </div> 



    </div> 

    <div class="content"> 

     <div class="contentBody"> 

     </div> 

     <div class="sidebar1"> 

     </div> 

    </div> 

    <div class="footer" > 

    </div> 

</div> 


</body> 
</html>

CSS：

@charset "utf-8"; 
/* CSS Document */ 

body{ 
    top:0; 
    left:0; 
    margin:0; 
    padding:0; 
    background-color:#666; 
} 

.container{ 
    position:relative; 
    margin-top: 0%; 
    position:relative; 
    width:1000px; 
    margin:0px auto; 
} 

.header{ 
    position:relative; 
    float:left; 
    width:900px; 
    height:120px; 
    background-color:#CFCA4C; 
    margin:0px 50px 0px 50px; 
} 

.navContainer{ 
    position:relative; 
    float:left; 
    width:100%; 
    height:80px; 
    margin:0px 0px 0px 0px; 

} 

.miniNav{ 
    height:100%; 
    position:absolute; 
    right:0px; 
} 

.nav{ 
    float:left; 
    max-width:900px; 
    width:900px; 
    height:100%; 
    background-color:#FFFFFF; 
    overfow:hidden; 
    margin: 0 20px 0 50px; 
} 

ul.nav{ 
    list-style:none;  
    padding: 0px; 
} 

ul.nav li{ 
    display:inline; 
    padding:0px;  
    float:left; 
} 



.content{ 
    float:left; 
    width:900px; 
    min-height:400px; 
    background-color:#FFFFFF; 
    margin:0px 50px 0px 50px; 
} 

.footer{ 
    float:left; 
    width:900px; 
    height:80px; 
    background-color:#CFCA4C; 
    margin:0px 50px 0px 50px; 
}

出典

2011-07-06 theDragon