Get a wrapper div's background-color to expand with the height - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-color

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-color

Description

Get a wrapper div's background-color to expand with the height

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">

.wrapper {<!--  www  .  ja va  2  s  .  c  om-->
   background-color: black;
   background-image: -webkit-linear-gradient(top, black, red);
   background-image: -moz-linear-gradient(top, black, red);
   background-image: linear-gradient(top, black, red);
}
.wrapper:after {
   display:block;
   content:".";
   font-size:0;
   height:0;
   color:transparent;
   clear:left;
}
.btn-group, .select-group {
   float: left;
   padding: 3px 4px 2px 4px;
}
.pagination-group {
   padding: 5px 4px 0 4px;
   float: right;
}
.pagination {
   border: 1px solid silver;
   background: #666;
   text-align: center;
   width: 18px;
   height: 18px;
   display: inline-block;
   margin: 0 0 0 2px;
   cursor: pointer;
   color: white;
}


      </style> 
 </head> 
 <body> 
  <div class="wrapper"> 
   <div class="btn-group"> 
    <input type="button" value="" class="btn"> 
    <input type="button" value="" class="btn"> 
    <input type="button" value="" class="btn"> 
    <input type="button" value="" class="btn"> 
    <input type="button" value="" class="btn"> 
    <input type="button" value="" class="btn"> 
    <input type="button" value="" class="btn"> 
    <input type="button" value="" class="btn"> 
    <input type="button" value="" class="btn"> 
    <input type="button" value="" class="btn"> 
   </div> 
   <div class="select-group"> 
    <select> 
       <option value="-1">Change Status to...</option> 
       <option value="1">Option 1</option> 
       <option value="2">Option 2</option> 
       <option value="3">Option 3</option> 
       <option value="4">Option 4</option> 
       <option value="5">Option 5</option> </select> 
   </div> 
   <div class="pagination-group"> 
    <table> 
     <tbody> 
      <tr> 
       <td> <a href="#" class="pagination first disabled">&lt;&lt;</a> </td> 
       <td> <a href="#" class="pagination back disabled">&lt;</a> </td> 
       <td> <b>1-10</b> of <b>10</b> </td> 
       <td> <a href="#" class="pagination next disabled">&gt;</a> </td> 
       <td> <a href="#" class="pagination last disabled">&gt;&gt;</a> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials