Div padding, margin?

Question

I am an 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 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 do my content with the code above the title , the div seems too big and appears under the type div, why is this? type div - width 20%, title - width 80%, so it should be 100% even. Is there any stock or other metric that I forgot here? I tried to move the title div to the left using a field, but is still faulty. I wonder what is the right way to get something like a picture? (Not entirely because if you look closer at the title div a little shorter than it should be. See that its right border is not aligned with the content div.)

Thanks in advance.

EDIT: 2010/09/28

This is actually what I want to achieve:

and this is what I have:

The code (updated a bit) will work if I didn’t have border divs. Since the border width is 1px, I need to set the 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 looks like)

This is not related to the clear:both property that I consider. I tried and had no effect since my content div was a good start.

In short: how can I make a div, including its border, to say exactly 20% of the width?

Ignacio

Answer:

I realized that the div shell around the type and name solves the problem accordingly. So my answer is something 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 containers and borders in the inner div.

Answer 1

You are missing a cleansing div. Floating elements do not extend the div .cell_3x3_type as you expected. Try 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 unchanged.

EDIT:
A small explanation of what the clear property does: consider a container div that contains only floating elements, for example (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> 

http://fii.cz/vksyr

The height of the div container is 0 because floating elements are extracted from the document stream and no longer affect the height of their container. The clear: both property on the element "clears" all floats, i.e. Ensures 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> 

http://fii.cz/tjdqwac

If you combine the two examples above, you can make the div container have a 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> 

http://fii.cz/nmpshuh