div padding, margin?

Question

Ich bin ein iPhone-Entwickler mit einigen grundlegenden CSS-Eigenschaften stecken ;) Ich möchte etwas wie dieses zeigen:

Das habe ich:

<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 das 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 meinen Inhalt mit obigem Code rendere title div scheint zu groß zu sein, und es erscheint unter type div, Warum ist das so? type div ist 20% breit, title ist 80 % breit, also sollte es genau 100 % sein. Habe ich hier irgendeinen Rand oder eine andere Metrik vergessen? Ich habe versucht zu verschieben title div auf der linken Seite mit Marge, ist aber immer noch fehlerhaft. Ich frage mich, was ist der richtige Weg, um so etwas wie das Bild zu bekommen? (Nicht genau, denn wenn Sie genauer hinschauen title div ist etwas kürzer als es sein sollte. Sehen Sie, dass der rechte Rand nicht an der content div.)

Vielen Dank im Voraus.

BEARBEITEN: 2010/09/28

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

und das ist, was ich habe:

Obigen Code (ein wenig aktualisiert) würde funktionieren, wenn ich nicht umrandet divs haben würde. Da Randbreite 1px ist, was ich brauche, ist zu setzen type div Breite auf 20%-2px (linker Rand + rechter Rand = 2px) und title div auf 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 ist ähnlich)

Dies hat nichts zu tun mit clear:both Eigentum, glaube ich. Ich habe es versucht und hatte keine Wirkung, da mein content div war von Anfang an gut.

Kurz gesagt: Wie kann ich ein div einschließlich seines Rahmens auf sagen wir genau 20% Breite machen?

Ignacio

ANTWORT:

Ich habe festgestellt, dass ein Wrapper-Div um Typ und Titel das Problem löst. Meine Antwort ist also in etwa so:

<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 habe 20 % und 80 % in den Containern und die Ränder im inneren Div festgelegt.