Hello Hello - 4 months ago 21
HTML Question

HTML/CSS: Make Border-right height dynamic

I am dealing with a big huge legacy code so this is why the HTML is badly styled. I have to work with what I have so I don't really want to try and fix it and mess up everything.

I am trying to make the border-right height dynamic (that takes the longest height of the columns).

Here is the jsfiddle I am working with: http://jsfiddle.net/XmKrm/616/

<div id="MAIN">
<div id="ColumnOne">
<table style="width: 100%">
<tr>
<td>111 <br/>
111</td>
</tr>
</table>
</div>
<div id="ColumnTwo">
<table style="width: 100%">
<tr>
<td>222</td>
</tr>
</table>
</div>
<div id="ColumnThree">
<table style="width: 100%">
<tr>
<td>333 333 <br> 333 <br> 333 </td>
</tr>
</table>
</div>
<div id="ColumnFour">
<table style="width: 100%">
<tr>
<td>444 444 <br> 444 444 <br> 444 444 <br> 444 </td>
</tr>
</table>
</div>




CSS

#ColumnOne,
#ColumnTwo,
#ColumnThree,
#ColumnFour {
float: left;
border-right: 1px solid;
}

Answer

#ColumnOne,
#ColumnTwo,
#ColumnThree,
#ColumnFour {
  border-right: 1px solid;
  display: table-cell;
  vertical-align: top;
}
<div id="ColumnOne">
  <div class="Coltop">SAMPLE TITLE</div>
  <div class="ColMid">
    <table style="width: 100%">
      <tr>
        <td>111
          <br/> 111
        </td>
      </tr>
    </table>
  </div>
</div>
<div id="ColumnTwo">
  <table style="width: 100%">
    <tr>
      <td>222</td>
    </tr>
  </table>
</div>
<div id="ColumnThree">
  <table style="width: 100%">
    <tr>
      <td>333 333
        <br> 333
        <br> 333
      </td>
    </tr>
  </table>
</div>
<div id="ColumnFour">
  <table style="width: 100%">
    <tr>
      <td>444 444
      <br> 444 444
      <br> 444 444
      <br> 444 </td>
    </tr>
  </table>
</div>

Comments