How to reset parent child relationship between nested div
- by Shantanu Gupta
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
