Flexible width of middle column in box-sizing:border-box - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

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

Description

Flexible width of middle column in box-sizing:border-box

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta charset="utf-8"> 
  <title>Untitled</title> 
  <style>

* {<!--   w  ww.ja v  a2  s  . com-->
   box-sizing:border-box; 
}
#all-wrapper {
   width: 960px;
   margin: 0 auto;
}
#content-left {
   float: left;
   width: 180px;
   min-height: 400px;
   background: indianred;
}
#content-middle {
   display: block;
   overflow: hidden; 
   min-height: 300px;
   background: dodgerblue;
   border: 5px dashed;
}
#content-right {
   float: right;
   min-width: 280px;
   min-height: 200px;
   background: green;
}

      </style> 
 </head> 
 <body> 
  <div id="all-wrapper"> 
   <div id="content-area" class="clearfix"> 
    <div id="content-left"></div> 
    <div id="content-right"></div> 
    <div id="content-middle"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials