title: div padding, margin?
body: <p>I am a iPhone developer stuck with some basic CSS properties ;) 
  I want to show something like this:
  <img src="https://i.stack.imgur.com/lcszj.png" alt="alt text"></p>
  
  <p>This is what I have:</p>
  
  <pre><code>&lt;div class="cell"&gt;
      &lt;div class="cell_3x3_top"&gt;
          &lt;div class="cell_3x3_type rounded_left"&gt;type&lt;/div&gt; &lt;!--UPDATED:2010/09/29--&gt;
          &lt;div class="cell_3x3_title rounded_right"&gt;title&lt;/div&gt;&lt;!--UPDATED:2010/09/29--&gt;
      &lt;/div&gt;
      &lt;div class="cell_3x3_content rounded_left rounded_right"&gt;content&lt;/div&gt;&lt;!--UPDATED:2010/09/29--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>But when I render my content with above code <code>title</code> div seems to be too large and it appears underneath <code>type</code> div, Why is this?
  <code>type</code> div is 20% width, <code>title</code> is 80% width so it should be 100% exactly. Is any margin or other metric I am forgetting here?
  I have tried to move <code>title</code> 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 <code>title</code> div is a little bit shorter than it should be. See that its right border is not aligned with <code>content</code> div.)</p>
  
  <p>Thanks in advance.</p>
  
  <p>EDIT: 2010/09/28</p>
  
  <p>This is actually what I want to achieve:
  <img src="https://i.stack.imgur.com/AxXJ7.png" alt="alt text"></p>
  
  <p>and this is what I have:
  <img src="https://i.stack.imgur.com/IkQ8G.png" alt="alt text"></p>
  
  <p>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 <code>type</code> div width to 20%-2px (left border + right border = 2px) and <code>title</code> div to 80%-2px</p>
  
  <pre><code>.rounded_left{
      border-top-left-radius: 4px 4px;
      border-bottom-left-radius: 4px 4px;
  
      border-color:gray;
      border-width: 1px;
      border-style:solid;
  }
  </code></pre>
  
  <p>(.rounded_right is similar)</p>
  
  <p>This is not related to <code>clear:both</code> property I believe. I tried and didn't had any effect since my <code>content</code> div was good form the beginning.</p>
  
  <p>In short: How can I make a div including its border to be let's say exactly 20% width?</p>
  
  <p>Ignacio</p>
  
  <p>ANSWER:</p>
  
  <p>I realized that a wrapper div around type and title respectively solves the problem. So my answer is kind of like this:</p>
  
  <pre><code>&lt;td class="cell"&gt;
  &lt;div class="cell_3x3_top bordered"&gt;
  &lt;div class="cell_3x3_type_container"&gt;&lt;div class="cell_3x3_type rounded_left full_height"&gt;6&lt;/div&gt;&lt;/div&gt;
  &lt;div class="cell_3x3_title_container"&gt;&lt;div class="cell_3x3_title rounded_right full_height"&gt;title&lt;/div&gt;&lt;/div&gt;                                                               &lt;/div&gt;
  &lt;div class="cell_3x3_content rounded_left rounded_right"&gt;content&lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>I set 20% and 80% in the containers and the borders in the inner div. </p>