Make div container with multi column elements expanding to width of columns - 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 div container with multi column elements expanding to width of columns

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

.container{border:1px red solid;display:table;table-layout:fixed;}
.containerRow{display:table-row;}
.containerRow > div{display:table-cell;min-height:200px;border:1px green solid;}
.col1{width:100px;}
.col2{width:150px;}
.col3{width:100px;}


      </style> 
 </head> <!--from www  .  j a v a2  s .  c o m-->
 <body> 
  <div class="container"> 
   <div class="containerRow"> 
    <div class="col1">
      This is column 1 
    </div> 
    <div class="col2">
      This is column 2 
    </div> 
    <div class="col3">
      This is column 3 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials