Create two fixed width column layout with one flexible column in the center - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

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

Description

Create two fixed width column layout with one flexible column in the center

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

img {<!-- w ww .j  av  a 2  s . c om-->
   max-width: 100%;
}
#container {
   display: flex;
   x-justify-content: space-around;
   x-align-items: stretch;
   max-width: 1200px;
}
.column.left {
   width: 230px;
   flex: 0 0 230px;
}
.column.right {
   width: 230px;
   flex: 0 0 230px;
   border-left: 1px solid #eee;
}
.column.center {
   border-left: 1px solid #eee;
}


      </style> 
 </head> 
 <body> 
  <div id="container"> 
   <div class="column left"> 
    <p>this is a test this is a test </p> 
    <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> 
    <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> 
    <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> 
    <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> 
    <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> 
    <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> 
    <p>this is a test this is a test </p> <p>this is a test this is a test </p> <p>this is a test this is a test </p> 
   </div> 
   <div class="column center"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt=""> 
   </div> 
   <div class="column right">
     this is a test 
    <br> this is a t est thais dfa  q wet asd fa sdf qwe rasdfasdf
    <br> 01.12.13 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials