div padding, margin?

Question

Soy un desarrollador de iPhone pegado con algunas propiedades básicas de CSS;) quiero mostrar algo como esto:

Esto es lo que tengo:

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

y el 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; 
} 

Pero cuando renderizo mi contenido con el código anterior title div parece ser demasiado grande y aparece debajo de type div, Why ¿Es esto? type div tiene 20% de ancho, title tiene 80% de ancho, por lo que debe ser 100% exacto. ¿Hay algún margen u otra métrica que estoy olvidando aquí? He intentado mover title div hacia la izquierda utilizando el margen pero todavía está lleno de errores. Me pregunto ¿cuál es la forma correcta de obtener algo como la imagen? (No exactamente, porque si se mira de cerca title div es un poco más corto de lo que debería ser. Ver que su borde derecho no está alineado con content div.)

Gracias de antemano.

EDIT: 2010/09/28

Esto es realmente lo que quiero lograr:

y esto es lo que tengo:

Por encima de código (actualizado un poco) funcionaría si no hubiera borrado los divs. Desde ancho del borde es de 1 píxel lo que necesito es establecer type div anchura a 20% -2px (borde izquierdo + borde derecho = 2px) y title div a 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 es similar)

Esto no está relacionado con la propiedad clear:both, creo. Intenté y no tuve ningún efecto ya que mi div content era buena desde el principio.

En resumen: ¿Cómo puedo hacer que un div incluyendo su borde digamos exactamente 20% de ancho?

Ignacio

RESPUESTA:

me di cuenta de que un div contenedor alrededor de tipo y el título resuelve el problema, respectivamente. Así que mi respuesta es algo así como esto:

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

puse 20% y el 80% en los contenedores y las fronteras en el div interior.

Answer 1

Faltan las acciones de depuración. Los elementos flotantes no expanden el div .cell_3x3_type como era de esperar.Tal vez puedas probar:

<div class="cell"> 
    <div class="cell_3x3_top"> 
     <div class="cell_3x3_type">type</div> 
     <div class="cell_3x3_title">title</div> 
     <div class="cell_3x3_clear"></div> 
    </div> 
    <div class="cell_3x3_content">content</div> 
</div> 

CSS:

div.cell_3x3_clear { 
    clear: both; 
} 

El resto se mantiene igual.

EDIT:
Una pequeña explicación de lo que la propiedad claro qué: considere un contenedor div que contiene sólo flotaba elementos, como esta (usando CSS en línea para mayor claridad):

<div id="container" style="border: 1px solid green;"> 
    <div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
    <div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
</div> 

http://fii.cz/vksyr

la altura del contenedor div es 0 debido a que los elementos flotantes se sacan del flujo de documentos y no afectan a la altura de su contenedor más. La propiedad clear: both en un elemento "borra" todos los flotadores, es decir, se asegura de que el elemento se coloca por debajo de todos los elementos flotantes que le preceden:

<div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
<div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
<div style="clear: both; height: 10px; width: 50px; border: 1px solid black;">Cleared</div> 

http://fii.cz/tjdqwac

Si se combinan los dos ejemplos anteriores, se puede forzar el contenedor div tener su altura igual a la altura del elemento flotante más alto en él:

<div id="container" style="border: 2px solid green;"> 
    <div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div> 
    <div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div> 
    <div style="clear: both; height: 0px; border: 1px solid black;"></div> 
</div> 

http://fii.cz/nmpshuh