Create Liquid layout with liquid left and fixed right column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Create Liquid layout with liquid left and fixed right column

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, .wrap, .wrap > div {
   height: 100%;
}
.wrap {<!--from ww w  .j  a v  a 2  s . c o m-->
   display: flex;
   display: -webkit-flex;
}
.fluid {
   width: 100%;
   background: #eee;
   flex: 1;
}
.fixed {
   background: #aaa;
   width: 200px;
}


      </style> 
 </head> 
 <body> 
  <div class="wrap"> 
   <div class="fluid"></div> 
   <div class="fixed"></div> 
  </div>  
 </body>
</html>

Related Tutorials