div rembourrage, la marge?

Je suis un développeur iPhone coincé avec une base de propriétés CSS 😉
Je veux montrer quelque chose comme ceci:

C'est ce que j'ai:

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

et le 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;
}

Mais quand j'ai rendu mon contenu avec le code ci-dessus title div semble être trop grand et il apparaît sous type div, Pourquoi est-ce?
type div est de 20% de largeur, title est de 80% de la largeur de sorte qu'il devrait être de 100% exactement. Est toute marge ou d'autres métriques je suis oublier ici?
J'ai essayé de déplacer title div à gauche à l'aide de la marge mais il est encore buggé. Je me demande quelle est la bonne manière d'obtenir quelque chose comme sur la photo?
(Pas exactement, parce que si vous regardez de plus près title div est un peu plus courte que ce qu'elle devrait être. Voir que sa bordure droite n'est pas aligné avec content div.)

Merci d'avance.

EDIT: 2010/09/28

C'est en fait ce que je veux réaliser:

et c'est ce que j'ai:

Code ci-dessus (mise à jour un peu) si je n'aurais pas bordé divs. Depuis la largeur de la bordure est 1px ce dont j'ai besoin est de mettre en type div de largeur à 20%-2px (gauche + droite de la bordure = 2px) et title div à 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 est similaire)

Ce n'est pas lié à clear:both bien je crois. J'ai essayé et n'ai pas eu d'effet depuis mon content div était un bon début.

En bref: Comment puis-je faire une div, y compris de ses frontières pour être disons exactement 20% de la largeur?

Ignacio

RÉPONSE:

J'ai réalisé qu'un wrapper div autour du type et titre respectivement de résoudre le problème. Donc, ma réponse est un peu comme ceci:

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

J'ai mis 20% et 80% dans les contenants et les frontières dans l'intérieur de la div.

OriginalL'auteur nacho4d | 2010-09-27