Equal height columns with border-bottom on hover - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

Equal height columns with border-bottom on hover

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#container { display: table; }
.row { display: table-row; }
.row > div {<!--from ww  w .j  ava  2 s.  c  om-->
   display: table-cell;
   width: 100px;
   border-bottom: 1px solid lightgray;
   padding-left: 10px;
}
.row > div:hover { border-bottom: 1px solid gray; }


      </style> 
 </head> 
 <body> 
  <div id="container"> 
   <div class="row"> 
    <div>
      Test TEst test test test
     <br> City, Country 
     <br> 
    </div> 
    <div>
      contact@mail.com 
     <br> +22(2) 123 456 78 
     <br> 
    </div> 
    <div>
      message 
    </div> 
   </div> 
   <div class="row"> 
    <div>
      hi there! 
    </div> 
    <div>
      contact 
    </div> 
    <div>
      twitter 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials