Give one column what it needs, give the other column the rest space - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Give one column what it needs, give the other column the rest space

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 {<!--from  www.jav  a 2 s  .  c  o m-->
   display: table;
   width: 100%;
}
.column {
   display: table-cell;
   background-color: yellow;
   border: 1px solid blue;
}
.side {
   width: 1%;
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="column side">
     Side test test test
   </div> 
   <div class="column content">
     Content 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials