how to create following divs? - html

Question

Sorry but having difficulty in creating a group of div as attached pic..please help
http://imgur.com/J8psv
my biggest problem is having to get the divs arranged next to each other inside of parent divs. Infact to go to a next level, if there is a 5th div of 200px then I want it to automatically come to the second line.
I understand I need something to do with CSS, just that am not so well versed with it.
.div_main_left {
width: 800px;
border: 1px solid;
height: 600px;
float: left;
display: table-cell;
}
.div_sec_left {
width: 200px;
border: 1px solid;
height: 75px;
display: inline;
float: left;
}
.div_right {
width: 250px;
border: 1px solid;
height: 500px;
float: right;
display: table-cell;
}

Answer 1

You can do it like this:
HTML
<div id="mainwrapper">
<div id="leftwrapper">
<div class="topbox"></div>
<div class="topbox"></div>
<div class="topbox"></div>
<div class="topbox"></div>
<div id="maincontent"></div>
</div>
<div id="rightwrapper">
<div id="topsidebar"></div>
<div id="bottomsidebar"></div>
</div>
</div>
CSS
#mainwrapper{
width:1050px;
}
#rightwrapper{
width:250px;
float:left;
}
#leftwrapper{
width:800px;
float:left;
}
.topbox{
float: left;
width:196px;
margin-right:4px;
height:75px;
background-color:orange;
}
#maincontent{
width:100%;
height:675px;
background-color:blue;
clear:both;
}
#topsidebar
{
width:100%;
height:600px;
background-color:green;
}
#bottomsidebar{
width:100%;
height:150px;
background-color:red;
}
Here is the jsfiddle

Answer 2

Do it in a list then style the list itself. From: http://www.alistapart.com/articles/taminglists/
#tabs ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#tabs ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;
display: inline;
}
#tabs ul li.here {
border-bottom: 1px solid #ffc;
list-style: none;
display: inline;
}

Answer 3

You can start with this:
Fiddle Example
First the html:
<div id="container">
<div class="big_left">
<div class="float_parent">
<div class="small">200x75</div>
<div class="small">200x75</div>
<div class="small">200x75</div>
<div class="small">200x75</div>
</div>
<div class="content">
The Content;
</div>
</div><!-- Big left End -->
<div class="big_right">
<div class="right_long">
250x750
</div>
</div><!-- Big Right End -->
</div>
Then the css:
#container {
width:1065px;
}
.big_left {
width:810px;
float:left;
}
.big_right {
width:255px;
float:left;
}
.big_left .float_parent {
width:800px;
}
.big_left .float_parent .small{
width:200px;
height:75px;
float:left;
}
.big_left .content {
clear:both;
}
.big_right .right_long {
width:250px;
height:750px;
}