div padding, margin ??

Question

Hi, I am a iPhone developer stuck with some basic CSS properties ;) I want to show something like this:

This is what I have:

<div class="cell">
    <div class="cell_3x3_top">
        <div class="cell_3x3_type rounded_left">type</div> <!--UPDATED:2010/09/29-->
        <div class="cell_3x3_title rounded_right">title</div><!--UPDATED:2010/09/29-->
    </div>
    <div class="cell_3x3_content rounded_left rounded_right">content</div><!--UPDATED:2010/09/29-->
</div>

and the css:

div.cell_3x3_top{
    height:20%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
    margin-bottom: 1px; /*to compensate space between top and content*/
    text-align: center;
    vertical-align: middle;


}
div.cell_3x3_type{
    width:20%;
    float:left;
    background-color: inherit;
    margin-right: -2px; /*UPDATED:2010/09/29*/
}
div.cell_3x3_title{
    width:80%;
    float:left;
    background-color: inherit;
    margin: 0 0 0 0;  /* maybe not neccesary*/
    padding: 0 0 0 0; /*maybe not neccesary*/
    margin-left: -1px; /*UPDATED:2010/09/29 */

}
div.cell_3x3_content{
    height:80%;
    background-color: inherit;
}

But when I render my content with above code title div seems to be too large and it appears underneath type div, Why is this? type div is 20% width, title is 80% width so it should be 100% exactly. Is any margin or other metric I am forgetting here? I have tried to move title div to the left using margin but is still buggy. I wonder what is the correct way of getting something like the picture? (Not exactly because if you look closer title div is a little bit shorter than it should be. See that its right border is not aligned with content div.)

Thanks in advance.

EDIT: 2010/09/28

This is actually what I want to achieve:

and this is what I have:

Above code (updated a little bit) would work if I wouldn't have bordered divs. Since border width is 1px what I need is to set type div width to 20%-2px (left border + right border = 2px) and title div to 80%-2px

.rounded_left{
    border-top-left-radius: 4px 4px;
    border-bottom-left-radius: 4px 4px;

    border-color:gray;
    border-width: 1px;
    border-style:solid;
}

(.rounded_right is similar)

This is not related to clear:both property I believe. I tried and didn't had any effect since my content div was good form the beginning.

In short: How can I make a div including its border to be let's say exactly 20% width?

Ignacio

ANSWER:

I realized that a wrapper div around type and title respectively solves the problem. So my answer is kind of like this:

<td class="cell">
<div class="cell_3x3_top bordered">
<div class="cell_3x3_type_container"><div class="cell_3x3_type rounded_left full_height">6</div></div>
<div class="cell_3x3_title_container"><div class="cell_3x3_title rounded_right full_height">title</div></div>                                                               </div>
<div class="cell_3x3_content rounded_left rounded_right">content</div>
</td>

I set 20% and 80% in the containers and the borders in the inner div.