I am new to CSS designing and not aware of most of the properties of CSS. I am creating a layout for a web page. I am using div in my layout.

My structure is somewhat like this

                <div id="content1_bg">
                    <div>
                        <div class="content1_title_img_div"></div>
                        <div class="content1_title_txt_div"></div>
                        <div class="content1_dvider_div"></div>
                        <div class="content1_content_div"></div>
                    </div>
                    <div></div>
                    <div></div>
                </div>

For this my CSS is

#content1_bg div{width:250px;height:220px;float:left;border:3px solid blue; margin:20px;}

.content1_title_img_div{width:50px;height:100px;}
.content1_title_txt_div{width:150px;height:100px;}
.content1_dvider_div{width:100%;height:10%;clear:both;}
.content1_content_div{width:100%;height:50%;clear:both;}

For this layout i was expecting my design to be like 

----------------
|BOX1     BOX2 |
----------------
|    BOX 3     |
----------------
|    BOX 4     |
----------------

But on using my css layout is somewhat like this

--------------------
|    | |     |     |
|BOX1| | BOX2|     |
|    | |     |     |
--------------------
|    | 
|BOX3|
|    |
--------------------
|    | 
|BOX4|
|    |

Basically i want my inner div's not to inherit the properties of outer div. How can i remove this inheritance relationship between parent div and child div