title: Trouble with a checkbox inside a div with a dynamic height, how to do?
body: <p>I've got a lot of trouble with getting my checkboxes vertical aligned in my divs with a dynamic height. </p>
  
  <p>I have some of my view:</p>
  
  <pre><code>&lt;div class="col-md-7"&gt;
          &lt;div class="row recent-information"&gt;
              &lt;div class="product-navigation"&gt;
                  &lt;div class="product-header-text"&gt;
                      &lt;div class="col-md-3 product-details"&gt;
                          &lt;p&gt;Product name&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4 product-details"&gt;
                          &lt;p&gt;Note&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-2 product-details"&gt;
                          &lt;p&gt;Price&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-2 product-details"&gt;
                          &lt;p&gt;Stock&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              @foreach (var item in Model.Products)
              {
                  &lt;div class="product-header"&gt;
                      &lt;div class="product-header-text"&gt;
                          &lt;div class="col-md-3 product-details-entity"&gt;
                              &lt;h6&gt;@item.Name&lt;/h6&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-4 product-details-entity"&gt;
                              &lt;h6&gt;@item.Description&lt;/h6&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-2 product-details-entity"&gt;
                              &lt;h6&gt;@item.Price DKK&lt;/h6&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-1 product-details-entity"&gt;
                              &lt;h6&gt;@item.Stock&lt;/h6&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-1 product-details-checkbox"&gt;
                              @Html.CheckBox("naem", new { @class = "products-checkbox" })
                          &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
              }
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And the style:</p>
  
  <pre><code> .product-header {
      min-height: 7%;
      min-width: 100%;
      margin-bottom: 3px;
      border-bottom: 1px solid #e6e6e6;
      overflow: hidden;
  
  }
  
      .product-header-text {
      width: 98%;
      margin-left: 10px !important;
      margin-right: 10px !important;
      float: left;
      font-weight: 700 !important;
      margin-bottom: 3px;
      height: 100%;
  }
  
  .product-details {
      font-weight: 500 !important;
      margin-top: 13px;
      font-family: 'Raleway', sans-serif;
      font-size: 12px;
      height: auto;
      min-height: 100%;
  }
  
  .product-details-entity {
      margin-top: 20px;
      height: auto;
  }
  
  input[type="checkbox"] {
      background: #f8f8f5;
      -webkit-appearance: none;
      height: 22px;
      width: 22px;
      margin-top: 20%;
      cursor: pointer;
      margin-left: 65px;
  }
  
  input[type="checkbox"]:checked {
      background-image: url("../Images/checkmark2.png");
      height: 22px;
      width: 22px;
  }
  </code></pre>
  
  <p>My problem is, that my divs, the product-details are dynamically based on the content from the database, and I can't get my checkboxes to follow. </p>