div padding, margin?

Ich bin ein iPhone-Entwickler stecken mit einigen grundlegenden CSS-Eigenschaften 😉
Ich will zeigen, so etwas wie dieses:

Dies ist, was ich habe:

<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>

und 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;
}

Aber wenn ich render meine Inhalte mit obigen code title div scheint zu groß zu sein, und erscheint es unter type div, Wieso ist das so?
type div ist 20% Breite title ist 80% Breite, so sollte es 100% genau. Ist einer Marge oder anderen metrischen ich vergessen habe hier?
Ich habe versucht zu bewegen title div Links mit Rand, ist aber noch buggy. Ich Frage mich, was ist der richtige Weg, um etwas, wie auf dem Bild?
(Nicht genau, weil wenn man genauer hinschaut title div ist ein wenig kürzer als es sein sollte. Sehen, dass der Rechte Rand ist nicht ausgerichtet mit content div.)

Vielen Dank im Voraus.

EDIT: 2010/09/28

Dies ist eigentlich das, was ich erreichen möchte:

und das ist, was ich habe:

Obigen code (aktualisiert ein wenig) arbeiten würde, hätte ich nicht gesäumt divs. Da border-width 1px, was ich brauche, ist gesetzt type div Breite um 20%-2px (Linker Rand + rechter Rand = 2px) und title div zu 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 ähnlich)

Dies ist nicht im Zusammenhang mit clear:both Eigenschaft, glaube ich. Ich habe versucht, und wollte nicht hatte keine Wirkung da meine content div war gut in form am Anfang.

Kurz: Wie kann ich ein div-einschließlich seiner Grenze zu sein, lassen Sie uns sagen, dass genau 20% der Breite?

Ignacio

ANTWORT:

Erkannte ich, dass ein wrapper-div um Typ und Titel bzw. das problem löst. Also meine Antwort ist eine Art, wie diese:

<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>

Ich 20% und 80% in den Behältern und die Grenzen im inneren div.