CSS responsive equal height columns with buttons - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button style

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button style

Description

CSS responsive equal height columns with buttons

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>responsive 2-column equal height cont.</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body {<!--from   ww  w. j  a v a  2s. c om-->
   margin: 0;
   padding: 40px;
}
.container {
   display: table;
   background: rgba(0, 0, 0, 0);
   padding: 0;
   border-spacing: 10px 3px;
   border-collapse: separate;
   width: 100%;
}
div {
   background: #333;
   color: #FFF;
   width: 48%;
   margin: 0;
   display: table-cell;
}
div p {
   padding: 20px;
   margin: 0;
}
a {
   display: table-cell;
   background: #2CB32C;
   color: #FFF;
   border-radius: 5px;
   padding: 4px 0;
   text-align: center;
}
.show-small { display: none; }
@media screen and (max-width: 30em) {
   .container { display: block; }
   div > div {
      display: block;
      width: 100%;
   }
   a { border-radius: 0; }
   .show-small { display: block; }
   .hide-small { display: none; }
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div> 
    <p>This one has a little content</p> 
   </div> 
   <a class="show-small" href="Javascript;">Click Here!</a> 
   <div> 
    <p>this is a test this is a test.</p> 
   </div> 
   <a class="show-small" href="Javascript;">Click Here!</a> 
  </div> 
  <div class="container hide-small"> 
   <a href="Javascript;">Click Here!</a> 
   <a href="Javascript;">Click Here!</a> 
  </div>  
 </body>
</html>

Related Tutorials