Set width with calc() function - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Width

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

Description

Set width with calc() function

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
header {<!--  w ww .  j a  va  2s . c  o m-->
   width: 100%;
   height: 70px;
   background: brown;
}
.leftCont, .centerCont, .rightCont {
   display: inline-block;
   height: calc(100% - 70px);
}
.leftCont {
   width: 210px;
   background: #2b2b2b;
}
.centerCont {
   width: 110px;
   background: #4b4b4b;
}
.rightCont {
   width: calc(100% - 320px);
   background: tan;
}

      </style> 
   </head> 
   <body> 
      <header></header> 
      <div class="leftCont"></div> 
      <div class="centerCont"></div> 
      <div class="rightCont"></div>  
   </body>
</html>

Related Tutorials