Question

Sorry but having difficulty in creating a group of div as attached pic..please help

https://i.stack.imgur.com/9ClxP.jpg

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