Two divs on left and right in parent, right with fixed width, left fill free space, both in same line - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Div

Description

Two divs on left and right in parent, right with fixed width, left fill free space, both in same line

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   w  w w  .j ava  2  s.co m-->
   width:501px;
   background-color:Chartreuse;
   height:51px;
   display:table;
}

.container .left {
   background-color:yellow;
   height:51px;
   display:table-cell;
   width:100%;
}

.container .right {
   background-color:blue;
   width:51px;
   height:51px;
   display:inline-block;
   vertical-align:text-top;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="left">
     Lorem ipsum dolor sit amet, cons 
   </div> 
   <div class="right">
     Lorem ipsum d 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials