Google News
logo
CSS Height and Width
The height and width can be set to auto or be specified in length values, like px, cm, etc., or in percent (%).
Example :
<html>
<head>
    <title>Height and Width</title>
</head>
<body>
    
<style type="text/css">
    .h_w_px{ 
       height: 100px;
       width:200px;
       background:#390;
       color:#FFF;
      }
 
</style>
    
       <div class="h_w_px">
        Height : 100px; <br>
           width : 200px;
       </div>
     
</body>
<html>
Output :
Height : 100px;
width : 200px;
Example : 2
<html>
<head>
      <title>Height and Width</title>
</head>
<body>
    
<style type="text/css">
 .h_w_auto{ 
    height:auto;
    width:auto;
    background:#F00;
    color:#FFF;
   }
</style>
   
     
      <div class="h_w_auto">
       Height : auto; <br>
          width : auto;
      </div>
     
   </body>
<html>
Output :
Height : auto;
width : auto;
Example : 3
<html>
<head>
   <title>Height and Width</title>
</head>
<body>
    
<style type="text/css">
.h_w_percent{ 
    height:20%;
    width:50%;
    background:#603;
    color:#FFF;
  }
</style>
 
     <div class="h_w_percent">
      Height : 20%; <br>
         width : 50%;
     </div>
    
   </body>
<html>
Output :
Height : 20%;
width : 50%;