make one column to take all the remaining width - 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 one column to take all the remaining width

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

.ui-tablewrapper {<!--  w w w  .  j  a v a 2s.c o  m-->
   position:relative;
   width:100%;
   color:#000;
   font-size: 0;
}
.ui-tablebanner {
   display:inline-block;
   margin-right:1px;
   color:#000;
   border:1px solid #000;
   height: 25px;
   font-size: .75rem;
   box-sizing: border-box;
}
#ui-tablebanner-26 {
   width: 26px;
   position: absolute;
   left: 31px;
}
#ui-tablebanner-30 {
   width: 30px;
   position: absolute;
   left: 0;
}
#ui-tablebanner {
   position: absolute;
   left: 58px;
   right: 0;
}


      </style> 
 </head> 
 <body> 
  <div class="ui-tablewrapper"> 
   <div class="ui-tablebanner" id="ui-tablebanner-30">
     1 
   </div> 
   <div class="ui-tablebanner" id="ui-tablebanner-26">
     2 
   </div> 
   <div class="ui-tablebanner" id="ui-tablebanner">
     3 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials