child div outside the parent - css

Question

I am currently designing a website . But in one of my parent div box_t,the child divs box_t1 and box_t2 goes outside the box_t.
Html:
<div id="main_container">
<div class="box_t">
<div class="box_t1">
<h2>Start</h2>
</div>
<div class="box_t2">
<div class="boxt21">
<h2>Name</h2>
</div>
<div class="boxt22">
Hi
</div>
</div>
</div>
</div>
CSS:
#main_container
{
width:960px;
margin:0 auto;
}
.box_t
{
padding:20px 14px 20px 15px;
color:#07337a;
overflow:hidden;
}
.box_t h2
{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
.box_t1
{
width:340px;
float:left;
}
.box_t2
{
float:left;
}
.box_t2
{
margin-left:255px;
}
.boxt21
{
float:left;
}
.boxt22
{
float:left;
}

Answer 1

Your child divs are not going outside the parent div, but what you see on dream waver is due to dream waver's style of displaying the html contents.
Check actual rendering of your code in browser

Answer 2

You should use clearfix for parent block.
There a lot of ways to do it set overflow:hidden or set at bottom element with clear: both empty block inside parent.
My fav way is:
// for modern browsers
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* IE6-7 */
.clearfix {
zoom: 1;
}
Use it class on your parent div and that's it.

Answer 3

When ever you use the float for your div. Do remember to clear the float.The whole problem is that floated objects do not add to the height of the object the reside in properly. And hence child div appear to be outside of parent div.All we need to do is clear the float, and this entire problem goes away. Put this empty div AFTER your last floated object:
<div style="clear: both;"></div>

Answer 4

You need to clear your floats
<div id="main_container">
<div class="box_t">
<div class="box_t1">
<h2>Start</h2>
</div>
<div class="box_t2">
<div class="boxt21">
<h2>Name</h2>
</div>
<div class="boxt22">
Hi
</div>
</div>
</div>
There is a better way to do this, create a class called clearfix and add it to the br... well really you should even include a br... but there you go.

Answer 5

I would suggest using borders (style="border:1px solid red") on all the div while developing a layout, it helps to know where exactly the divs are positioned.
This helps developers who dont use Dreamweaver or other editing tools.