div padding, margin? - html

Question

I am a iPhone developer stuck with some basic CSS properties ;)
I want to show something like this:
This is what I have:
<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>
and the 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;
}
But when I render my content with above code title div seems to be too large and it appears underneath type div, Why is this?
type div is 20% width, title is 80% width so it should be 100% exactly. Is any margin or other metric I am forgetting here?
I have tried to move title div to the left using margin but is still buggy. I wonder what is the correct way of getting something like the picture?
(Not exactly because if you look closer title div is a little bit shorter than it should be. See that its right border is not aligned with content div.)
Thanks in advance.
EDIT: 2010/09/28
This is actually what I want to achieve:
and this is what I have:
Above code (updated a little bit) would work if I wouldn't have bordered divs. Since border width is 1px what I need is to set type div width to 20%-2px (left border + right border = 2px) and title div to 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 is similar)
This is not related to clear:both property I believe. I tried and didn't had any effect since my content div was good form the beginning.
In short: How can I make a div including its border to be let's say exactly 20% width?
Ignacio
ANSWER:
I realized that a wrapper div around type and title respectively solves the problem. So my answer is kind of like this:
<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>
I set 20% and 80% in the containers and the borders in the inner div.

Answer 1

You are missing a clearing div. The floating elements do not expand the .cell_3x3_type div as you would expect. Try this instead:
<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;
}
The rest remains the same.
EDIT:
A small explanation of what the clear property does: consider a container div that contains only floated elements, like this (using inline CSS for clarity):
<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>
(source: fii.cz)
The height of the container div is 0 because the floating elements are taken out of the document flow and do not affect the height of their container anymore. The clear: both property on an element "clears" all floats, i.e. makes sure that the element is placed below all floating elements that precede it:
<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>
(source: fii.cz)
If you combine the two above examples, you can force the container div to have its height equal to the height of the highest floating element in it:
<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>
(source: fii.cz)