DIV inside another DIV inside another DIV with CSS

Question

Here is what I am trying to achieve:

This is the HTML code I wrote:

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

and this is 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; } 

Inside Div 6 I have a few more Divs. It all just comes off board. Div 2 and Div 3 look fine inside Div 1, and Div 7 looks great inside Div 3, but as soon as I add Divs 3, 4, 5 ... I tried a few things with a float, position, etc. - nothing worked, I arrange it as I want. Any ideas how to make it work?

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

If I have not forgotten something that should be around him