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. Почему это так? type div - это ширина 20%, title - это ширина 80%, поэтому она должна быть точно на 100%. Есть какой-то запас или другой показатель, который я здесь забыл? Я попытался переместить title div влево с помощью поля, но все еще глючит. Интересно, как правильно получить что-то похожее на картинку? (Не совсем потому, что если вы посмотрите ближе, title div немного короче, чем должно быть. Убедитесь, что его правая граница не выровнена с content div.)

Заранее спасибо.

РЕДАКТИРОВАТЬ: 2010/09/28

На самом деле это то, чего я хочу достичь:

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

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

(округляется_право похоже)

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

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

Игнасио

ОТВЕТ:

Я понял, что обёртка div вокруг type и title соответственно решает проблему. Итак, мой ответ примерно такой:

<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% в контейнерах и границы во внутреннем div.

Answer 1

Вам не хватает очищающего div. Плавающие элементы не расширяют 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;
}

Остальное остается прежним.

РЕДАКТИРОВАТЬ:
Небольшое объяснение того, что делает свойство clear: рассмотрим контейнер 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