CODEWITHSUNDEEP
htmlcss
Aswin Francis
Aswin Francis

Reputation: 97

How can get adjacent divs to match the height of the highest div in the row?

As you can see the product description column value is two lines and hence the row takes it's height. The problem is the adjacent divs are not taking up the same height and hence the border is not complete as you can see from the image below. It is all divs. To table, td or tr.

Table

.row:before,
.row:after {
  content: "";
  display: table;
  clear: both;
}

.row:after {
  clear: both;
}

.row {
  zoom: 1;
}

.row.table {
  border-right: none;
}

div.table {
  border: 1pt solid black;
  border-bottom: 0;
}

div.table>[class*='col-'],
.colcell {
  border: 0;
  border-right: 1pt solid black;
  padding-left: 5pt;
  padding-top: 1pt;
  line-height: 9pt;
}

[class*='col-'] {
  float: left;
  height: 11pt;
  vertical-align: top;
  padding-right: 5px;
  height: 100%;
}

[class*='col-']:last-of-type,
.last {
  padding-right: 0;
}

.col-10-2 {
  width: 20%;
  float: left;
  padding-right: 1%;
}

.col-10 {
  width: 10%;
  float: left;
  padding-right: 1%;
}

.col-2 {
  width: 50%;
  float: left;
  padding-right: 1%;
}
<div class="row table header">
  <div class="colcell col-10">Qty</div>
  <div class="colcell col-10-2">SKU</div>
  <div class="colcell col-2">Product Description</div>
  <div class="colcell col-10">Unit Price</div>
  <div class="colcell col-10">Ext Price</div>
</div>
<div class="row table">
  <div class="colcell col-10">1</div>
  <div class="colcell col-10-2">020145</div>
  <div class="colcell col-2">Pok&#xe9;mon Folio Wallet iPhone 6 Case - JLRQ-PK-PB Pok&#xe9;mon Magnetic Folio Wallet</div>
  <div class="colcell col-10 price">$ 99.99</div>
  <div class="colcell col-10 price">$ 99.99</div>
</div>

Upvotes: 0

Views: 67

Answers (1)

ceindeg
ceindeg

Reputation: 444

The issue here is using floats within a display:table element. Here is some correct code to show you how to create a table with css display table, table-row & table-cell. No floats required. Here's the codepen: https://codepen.io/anon/pen/JrRrbg 

.table {
  display: table;
  border-collapse: collapse;
}
.row {
    display: table-row;
}
.row.header {
    font-weight:bold;
}
.colcell {
    display: table-cell;
    border: 1px solid black;
    padding-left: 5px;
}
.col-10-2 {
    width: 20%;
}
.col-10 {
    width: 10%;
    padding-right: 1%;
}
.col-2 {
    width: 50%;
    padding-right: 1%;
}
<div class="table">
  <div class="row header">
    <div class="colcell col-10">Qty</div>
    <div class="colcell col-10-2">SKU</div>
    <div class="colcell col-2">Product Description</div>
    <div class="colcell col-10">Unit Price</div>
    <div class="colcell col-10">Ext Price</div>
  </div>
  <div class="row">
    <div class="colcell col-10">1</div>
    <div class="colcell col-10-2">020145</div>
    <div class="colcell col-2">Pok&#xe9;mon Folio Wallet iPhone 6 Case - JLRQ-PK-PB Pok&#xe9;mon Magnetic Folio Wallet</div>
    <div class="colcell col-10 price">$ 99.99</div>
    <div class="colcell col-10 price">$ 99.99</div>
  </div>
</div>

Upvotes: 1

Related Questions