DIV dentro de otro DIV dentro de otro DIV con CSS

Question

Esto es lo que estoy tratando de lograr:

Este es el código HTML que escribí:

<div id="wrapper"> <!--This is the Div 1 in the picture--> 
    <div id="topBar"> <!--This is the Div 2 in the picture--> 
     <div id="logo"></div> <!--This is the Div 4 in the picture--> 
     <div id="menu"></div> <!--This is the Div 5 in the picture--> 
     <div id="login"><!--This is the Div 6 in the picture--> 
      <div class="loginElement"><input type="text" id="txtUsername" class="loginElementBox" size="29" value="User name" onClick="usernameFocus()" onBlur="usernameBlur()" /></div>    
      <div class="loginElement"> 
       <input type="text" name="txtFakePassword" id="txtFakePassword" class="loginElementBox" value="Password" onfocus="passwordFocus()" /><input style="display:none;" type="password" id="txtPassword" class="loginElementBoxFocus" onBlur="passwordBlur()" /> 
      </div> 

      <input type="button" id="btnLogin" value="" onclick="login()"><br /> 

      <span id="lblError"></span> 
     </div><!--Closing "login"--> 
    </div><!--Closing "topBar"--> 

    <div id="central"> <!--This is the Div 3 in the picture--> 
     <div id="top3"> <!--This is the Div 7 in the picture--> 

     </div> 
    </div><!--Closing "central"--> 
</div><!--Closing "wrapper"--> 

y este es el CSS :

#wrapper 
{ 
width:800px; 
background-color:#f2f2e8; 
position:relative; 
left:50%; 
margin-left:-400px; 
border-radius: 10px; 
-moz-border-radius: 10px; 
padding:5px; 
} 

#topBar 
{ 
width:780px; 
border: 1px solid; 
border-color: #dbd9ca; 
border-radius: 10px; 
-moz-border-radius: 10px; 
margin:5px; 
padding:5px; 
} 

#logo 
{ 
width:153px; 
height:66px; 
background-image:url(../images_ui/logo2.png); 
background-repeat:no-repeat; 
background-position:left center; 
margin:5px; 
padding:5px; 
float:left; 
} 

#menu 
{ 
float:left; 
width:400px; 
position:relative; 
} 

#login 
{ 
float:right; 
width:80px; 
} 

#central 
{ 
width:780px; 
border: 1px solid; 
border-color: #dbd9ca; 
border-radius: 10px; 
-moz-border-radius: 10px; 
margin:5px; 
margin-top:20px; 
padding:5px; 
} 

Dentro Div 6 tengo un par de Divs más todo sólo viene o ut revuelto. Div 2 y Div 3 se ven bien dentro de Div 1, y Div 7 se ve bien dentro de Div 3, pero una vez que agregué Divs 3, 4, 5 ... probé varias cosas, con flotador, posición, etc. - nada funcionó, puedo ' T organizarlo como lo quiero. ¿Alguna idea de cómo hacer que funcione?

Answer 1

#Div1 
{ 
width:800px; 
margin:0 auto; 
overflow:hidden; 
float:left; 
} 

#Div2 
{ 
width:100%; 
float:left; 
} 

#Div3 
{ 
width:100%; 
clear:both; 
} 

#Div4, #Div6 
{ 
float:left; 
width:30%; 
} 

#Div5 
{ 
float:left; 
width:40%; 
} 

#Div7 
{ 
width:70%; 
margin:50px auto; 
} 

Si no he olvidado algo que debe estar alrededor de ella