DIVs внутри другой DIV внутри другого DIV с помощью CSS

Question

Вот что я пытаюсь достичь:

Это HTML код, который я написал:

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

и это 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; 
} 

Внутри Div 6 у меня есть несколько дивы Это все просто приходит о ut скремблировал. Div 2 и Div 3 выглядят нормально внутри Div 1, а Div 7 отлично смотрится внутри Div 3, но как только я добавляю Divs 3, 4, 5 ... Я пробовал несколько вещей, с поплавком, положением и т. Д. - ничего не работало, Я устраиваю его, как хочу. Любые идеи, как заставить его работать?

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

Если я не забыл то, что должно быть вокруг него