title: Bootstrap 3 CSS causing div height to be zero
body: <p>I'm using onsen-ui for mobile app devl. I was trying to incorporate this login screen I saw on this page: <a href="http://cssdeck.com/labs/simply-login-form" rel="nofollow noreferrer">http://cssdeck.com/labs/simply-login-form</a></p>
  <p>Here is the html code:</p>
  <pre><code>&lt;div class=&quot;login&quot;&gt;
    &lt;div class=&quot;titulo&quot; style=&quot;vertical-align:baseline;height:14px;&quot;&gt;Staff Login&lt;/div&gt;
    &lt;form action=&quot;#&quot; method=&quot;post&quot; enctype=&quot;application/x-www-form-urlencoded&quot;&gt;
      &lt;input type=&quot;text&quot; required title=&quot;Username required&quot; placeholder=&quot;Username&quot; data-icon=&quot;U&quot;&gt;
        &lt;input type=&quot;password&quot; required title=&quot;Password required&quot; placeholder=&quot;Password&quot; data-icon=&quot;x&quot;&gt;
        &lt;div class=&quot;olvido&quot;&gt;
          &lt;div class=&quot;col&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Ver Carásteres&quot;&gt;Register&lt;/a&gt;&lt;/div&gt;
            &lt;div class=&quot;col&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Recuperar Password&quot;&gt;Fotgot Password?&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;a href=&quot;#&quot; class=&quot;enviar&quot;&gt;Submit&lt;/a&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p>What was happening was the div.titulo and a.enviar elements were somehow being set to height=0. I couldn't understand why this was happening, it works perfectly fine on the site I listed above and even when I copied the same code to an empty html file. I did some digging and after much research I found this bootstap css property to be the culprit:</p>
  <pre class="lang-css prettyprint-override"><code>* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
  </code></pre>
  <p>The original site I got this code from is not using bootstrap, but my application is...and it seems this bootstrap css is conflicting with the code. I commented out the above from boostrap css file.....take a look at before and after pictures of my login form:</p>
  <p>Not Working (with bootstrap box-sizing css):</p>
  <p><a href="https://i.stack.imgur.com/jzk0T.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jzk0T.jpg" alt="Not working" /></a><br />
  <sub>(source: <a href="http://www.imageno.com/image.php?id=hnqqzk0sfn90&amp;kk=1698558439" rel="nofollow noreferrer">imageno.com</a>)</sub></p>
  <p>Working (without bootstrap box-sizing css):</p>
  <p><a href="https://i.stack.imgur.com/2MioV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2MioV.jpg" alt="Working" /></a><br />
  <sub>(source: <a href="http://www.imageno.com/image.php?id=in8mdfdvvql2&amp;kk=2088245172" rel="nofollow noreferrer">imageno.com</a>)</sub></p>
  <p>Can someone explain to me why this is happening? What exactly is this box sizing and border-box and why is it causing div height to be zero at times?</p>
  <p>Update...here is the CSS provided from that site:</p>
  <pre><code>.login {
      width: 300px;
      height: 285px;
      overflow: hidden;
      background: #1e1e1e;
      border-radius: 6px;
      margin: 50px auto;
      box-shadow: 0px 0px 50px rgba(0,0,0,.8);
  }
  
  .login .titulo {
      width: 298px;
      height: 14px;
      padding-top: 13px;
      padding-bottom: 13px;
      font-size: 14px;
      text-align: center;
      color: #bfbfbf;
      font-weight: bold;
      background: #121212;
      border: #2d2d2d solid 1px;
      margin-bottom: 30px;
      border-top-right-radius: 6px;
      border-top-left-radius: 6px;
      font-family: Arial;
  }
  
  .login form {
      width: 240px;
      height: auto;
      overflow: hidden;
      margin-left: auto;
      margin-right: auto;
  }
  
  .login form input[type=text], .login form input[type=password] {
      width: 200px;
      font-size: 12px;
      padding-top: 14px;
      padding-bottom: 14px;
      padding-left: 40px;
      border: none;
      color: #bfbfbf;
      background: #141414;
      outline: none;
      margin: 0;
  }
  
  .login form input[type=text] {
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      border-top: #0b0b0b solid 1px;
      background: #141414 url(http://dev.dhenriquez.com/test-img/icons/111-user.png) 10px center no-repeat;
  }
  
  .login form input[type=password] {
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
      border-top: #0b0b0b 1px solid;
      border-bottom: #353535 1px solid;
      background: #141414 url(http://dev.dhenriquez.com/test-img/icons    /54-lock.png) 10px center no-repeat;
  }
  
  .login form .enviar {
      width: 240px;
      height: 12px;
      display: block;
      padding-top: 14px;
      padding-bottom: 14px;
      border-radius: 6px;
      border: none;
      border-top: #4eb2a8 1px solid;
      border-bottom: #161616 1px solid;
      background: #349e92;
      text-align: center;
      text-decoration: none;
      font-size: 12px;
      font-weight: bold;
      color: #FFF;
      text-shadow: 0 -1px #1d7464, 0 1px #7bb8b3;
      font-family: Arial;
  }
  
  .login .olvido {
      width: 240px;
      height: auto;
      overflow: hidden;
      padding-top: 25px;
      padding-bottom: 25px;
      font-size: 10px;
      text-align: center;
  }
  
  .login .olvido .col {
      width: 50%;
      height: auto;
      float: left;
  }
  
  .login .olvido .col a {
      color: #fff;
      text-decoration: none;
      font: 12px Arial;
  }
  </code></pre>