title: div positioning display block not working
body: <p>The layout is this, tab-wrapper holds 3 divs inside it, tab-wrapper-top, seperator, tab-wrapper-bottom. I simply want these to stack up, so i'm using display block and with 100% (so they fill the entirety of the tab-wrapper).</p>
  
  <p>why is it breaking?</p>
  
  <p>the HTML</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Informação pessoal&lt;/title&gt;
          &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"/&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="tab-wrapper"&gt;
              &lt;div class="tab-wrapper-top"&gt;       
                  &lt;div id="tab-wrapper-top-left"&gt;
                      &lt;div&gt;
                          &lt;label&gt;Nome&lt;/label&gt;
                          &lt;input type="text" /&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;label&gt;Grau Académico&lt;/label&gt;
                          &lt;input type="text" /&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;label&gt;Profissão&lt;/label&gt;
                          &lt;input type="text" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="tab-wrapper-top-middle"&gt;
                      &lt;div&gt;Picture here&lt;/div&gt;
                      &lt;span&gt;
                          &lt;label&gt;Data de entrada&lt;/label&gt;
                          &lt;input type="text"&gt;
                      &lt;/span&gt;
                      &lt;span&gt;
                          &lt;label&gt;Data de saída&lt;/label&gt;
                          &lt;input type="text"&gt;
                      &lt;/span&gt;
                      &lt;span&gt;
                          &lt;label&gt;Motivo da saída&lt;/label&gt;
                          &lt;select&gt;&lt;/select&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div id="tab-wrapper-top-right"&gt;
                      &lt;div&gt;
                          &lt;span&gt;
                              &lt;label&gt;Unidade Habitacional&lt;/label&gt;
                              &lt;input type="text" /&gt;
                          &lt;/span&gt;
                          &lt;span&gt;
                              &lt;label&gt;Extensão telefone&lt;/label&gt;
                              &lt;input type="text" /&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;span&gt;
                              &lt;label&gt;Tipo de contrato&lt;/label&gt;
                              &lt;select&gt;&lt;/select&gt;
                          &lt;/span&gt;
                          &lt;span&gt;
                              &lt;label&gt;Data contrato&lt;/label&gt;
                              &lt;input type="text" /&gt;
                          &lt;/span&gt;
                          &lt;span&gt;
                              &lt;label&gt;Número de cliente&lt;/label&gt;
                              &lt;input type="text" /&gt;   
                          &lt;/span&gt;
                      &lt;/div&gt;
                          &lt;div&gt;
                              &lt;label&gt;Protocolo&lt;/label&gt;
                              &lt;select&gt;&lt;/select&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;              
              &lt;/div&gt;      
              &lt;div class="separator"&gt;Separator&lt;/div&gt;
              &lt;div class="tab-wrapper-bottom"&gt;Bottom wrapper&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the CSS</p>
  
  <pre><code>/* TABS */
   .tab-wrapper {
      position: relative;
      top: 90px;
      width: 98%;
      margin: auto;
  }
  .tab-wrapper label {
      margin: 5px 10px 5px;
  }
  .tab-wrapper input {
      margin: 5px 10px 5px;
  }
  .tab-wrapper select {
      margin: 5px 10px 5px;
  }
  .tab-wrapper textarea {
      margin: 5px 10px 5px;
      width: 90%;
  }
  .tab-wrapper-top {
      display: block;
      width: 100%;
      -webkit-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
      -moz-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
      box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
  }
  .separator {
      display: block;
      width: 100%;
      background-color: red;
  }
  .tab-wrapper-bottom {
      display: block;
      width: 100%;
      background-color: red;
  }
  #tab-wrapper-top-left {
      display: block;
      float: left;
      width: 40%;
  }
  #tab-wrapper-top-left div {
      display: block;
  }
  #tab-wrapper-top-left label {
      display: inline-block;
      width: 20%;
  }
  #tab-wrapper-top-left input {
      width: 60%;
  }
  #tab-wrapper-top-middle {
      display: block;
      float: left;
      width: 18%;
  }
  #tab-wrapper-top-middle div {
      width: 90%;
      height: 40%;
      background-color: red;
  }
  #tab-wrapper-top-middle span {
      display: block;
  }
  #tab-wrapper-top-middle label {
      display: block;
  }
  #tab-wrapper-top-right {
      display: block;
      float: left;
      width: 40%;
  }
  #tab-wrapper-top-right div {
      display: block;
  }
  #tab-wrapper-top-right span {
      display: inline-block;
  }
  #tab-wrapper-top-right label {
      display: block;
  }
  #tab-wrapper-top-right input {
      display: inline-block;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/isherwood/koxjnrLf/" rel="nofollow">http://jsfiddle.net/isherwood/koxjnrLf/</a></p>