DIV all'interno di un altro DIV all'interno di un altro DIV con i CSS

Question

Ecco quello che sto cercando di realizzare:

Questo è il codice HTML che ho scritto:

<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"--> 

e questo è il 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; 
} 

All'interno Div 6 ho un paio di div tutto arriva proprio o ut strapazzato. Div 2 e Div 3 sembrano OK all'interno di Div 1, e Div 7 è bello all'interno di Div 3, ma una volta che ho aggiunto Divs 3, 4, 5 ... Ho provato diverse cose, con float, posizione etc - niente ha funzionato, posso ' t dispongalo come lo voglio io. Qualche idea su come farlo funzionare?

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; 
} 

Se non ho dimenticato qualcosa che dovrebbe essere intorno a questo proposito