Make html column fill the rest of the width - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Make html column fill the rest of the width

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

html,body{
   height:100%;
}
* {<!--from  w w  w.  j  a v a  2s . com-->
   padding: 0px;
   margin: 0px
}
#left_column {
   width: 250px;
   background-color: orange;
   float: left;
   height:100%;
}
#left_column + #right_column {
   margin-left: 250px;
}
#right_column {
   background-color: gold;
}


      </style> 
 </head> 
 <body> 
  <div id="left_column">
    250px fixed width 
  </div> 
  <div id="right_column">
    Remaining 100% width 
  </div>  
 </body>
</html>

Related Tutorials