How do I prevent my DIV from overflowing the table cell? - html

Question

How do I prevent the div overflow that appears at the top.
I do not want to set static dimensions either.
See it here http://jsfiddle.net/tok5zf35/1/ or below
.panel_white_black {
border:7px solid #56575a;
filter:alpha(opacity=70);
background-color:#56575a;
}
.round_all {
-webkit-border-radius:4px;
-khtml-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.round_top {
-webkit-border-radius:4px 4px 0px 0px;
-khtml-border-radius:4px 4px 0px 0px;
-moz-border-radius:4px 4px 0px 0px;
border-radius:4px 4px 0px 0px;
}
<div class="panel_white_black round_all" Width="200px">
<table width="100%" style="border-collapse:collapse; padding:0;" cellpadding="0">
<tr>
<td>
<div style="background: #353639; padding:7px; float:left; width:100%;" class="round_top">
<div style="float: left;"> <font color="white">{dialog title}</font>
</div>
<div style="float:right;"> <font color="white">{X}</font>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="background: #FFFFFF; padding:7px;">{data here}</div>
</td>
</tr>
</table>
</div>

Answer 1

Use box-sizing attribute:
.round_top {
box-sizing:border-box;
}
Corrected fiddle.
There's a good explanation on how this works here on CSS-tricks.com. Essentially it boils down in this case to that your width:100% now means 100% including my own borders instead of the default just my content, which caused the overflow.

Answer 2

If you are not aware of appending your code with yet another div - here is the solution
http://jsfiddle.net/my0j0mmy/
<div style="background: #353639; padding:7px;" class="round_top">
<div style="float: left;"> <font color="white">{dialog title}</font>
</div>
<div style="float:right;"> <font color="white">{X}</font>
</div>
<div style="clear:both"></div>
</div>