div padding, margin?

Question

Я разработчик iPhone застрял с некоторыми основными свойствами CSS;) Я хочу, чтобы показать что-то вроде этого:

Это то, что у меня есть:

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

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

Но когда я делаю свой контент с кодом выше title div кажется слишком большим и отображается под type div, Why это? type div - 20% ширина, title - 80% ширина, поэтому она должна быть на 100% точно. Является ли какой-либо запас или другой показатель, который я забыл здесь? Я попытался переместить title div влево с использованием поля, но все еще неисправен. Интересно, какой правильный способ получить что-то вроде картины? (Не совсем, потому что если вы посмотрите ближе title ДИВ немного короче, чем это должно быть. Смотрите, что его правая граница не совпадает с content дел.)

Спасибо заранее.

EDIT: 2010/09/28

Это на самом деле то, что я хочу добиться:

и это то, что у меня есть:

Над кодом (обновлено немного) будет работать, если бы я не ограничивал div. Так как ширина границы составляет 1px что мне нужно, чтобы установить type DIV ширина до 20% -2px (левый + правый границы границы = 2px) и title дел до 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 похож)

Это не относится к clear:both собственности, я считаю. Я пробовал и не имел никакого эффекта, так как мой content div был хорошим началом.

Вкратце: как я могу сделать div, включая его границу, скажем, ровно 20% ширины?

Игнасио

ОТВЕТ:

я понял, что обертка вокруг ДИВ типа и названия соответственно решает эту проблему. Так что мой ответ вроде как это:

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

Я установил 20% и 80% в контейнерах и границах во внутренних делах.

Answer 1

Вам не хватает поля для очистки. Плавающие элементы не расширяют div .cell_3x3_type, как вы ожидали.Попробуйте вместо этого:

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

Остальное остается тем же самым.

EDIT:
Небольшое объяснение того, что ясное свойство делает: рассмотрит контейнер div, который содержит только плавали элементы, как это (с помощью встроенного CSS для ясности):

<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

Высота контейнера div равна 0, поскольку плавающие элементы вынимаются из потока документов и больше не влияют на высоту их контейнера. clear: both свойство на элементе «очищает» все поплавки, т.е. убеждается, что элемент находится ниже всех плавающих элементов, которые предшествуют его:

<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

Если объединить две приведенные выше примеры, вы можете заставить контейнер DIV, чтобы иметь высоту, равную высоте самого высокого плавающего элемента в нем:

<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