Carlos Carlos - 7 months ago 10
HTML Question

Same width and height column by css

The requirement is to set equal height and equal width of column. I have used css property display table-cell for this and its works fine in terms of equal height but not well with when it comes to equal width. I know technically it is working fine but I want to make it equal width. So whether there is four column or one column in a one table it should come with one width.

I have also looked for flex but its support is not there in IE9 and has some compatibility issue with mobile browser. I have think and tried it many ways but did not got the solution. Here is fiddle if you want to try your hand on it.

HTML

<div class="table">
<div class="cell"><div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div></div>
<div class="cell"><div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></div>
<div class="cell"><div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></div>
<div class="cell"><div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></div>
</div>
<br>
<div class="table">
<div class="cell"><div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div></div>
<div class="cell"><div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></div>
</div>


.table{display:table; width:100%; height:100%}
.cell{display:table-cell; padding:0 10px; width:23.8%; height:100%}
.white-box{border:solid 1px #ccc; background:#eee; height:100%}

Answer

You can specify the width usine vw units. This unit has some quirks though. For example it includes scroll bars and margin/padding on body.

So if you are targeting 25% of available width you need to do something like calc(100vu - 17px - 20px) / 4.

.table {
  display: table;
  height: 100%;
}
.cell {
  display: table-cell;
  padding: 0 .5vw;
  width: 22vw;
  height: 100%;
}
.white-box {
  border: solid 1px #ccc;
  background: #eee;
  height: 100%;
}
<div class="table">
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>
<br>
<div class="table">
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div class="cell">
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  </div>
</div>

Comments