HTML CSS examples for CSS Widget:Table Column
Table of Two columns with equal height
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .clearfix:after {<!-- w w w. j a va2s.co m--> visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } *:first-child+html .clearfix { zoom:2; } .holder { position:relative; padding:6px; background:red; width:501px; } .column { width:201px; float:left; margin-left:6px; position:relative; z-index:3 } #column-1 { color:Chartreuse; } .hook { position:absolute; top:6px; bottom:6px; width:201px; z-index:2 } #hook-1 { left:6px; background:black; } #hook-2 { left:211px; background:white; } </style> </head> <body> <div id="container" class="holder clearfix"> <div id="column-1" class="column"> Lorem i <br>Lorem i <br>Lorem i <br> </div> <div id="column-2" class="column"> Lorem ipsum <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem ipsum <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem ipsum <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem ipsum <br>Lorem i <br>Lorem i <br>Lorem i <br>Lorem ipsum <br>Lorem i <br>Lorem i <br>Lorem i <br> </div> <div id="hook-1" class="hook"></div> <div id="hook-2" class="hook"></div> </div> </body> </html>