Use Display Table to create two column layout with Width Overflow - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Column

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Column

Description

Use Display Table to create two column layout with Width Overflow

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">
body {<!--  w  w  w.  j  av  a  2s .c  om-->
   margin:0px;
   padding-left:16px;
}

section.container {
   border:2px solid Chartreuse;
   display:table;
   max-width:100%;
   overflow:hidden;
   table-layout:auto;
   width:100%;
}

div.row {
   background-color:yellow;
   display:table-row;
}

aside.supplement {
   display:table-cell;
   float:right;
   padding-bottom:11px;
   width:351px;
}

section.details {
   background-color:blue;
   border-right:2px solid pink;
   display:table-cell;
   margin-right:351px;
   vertical-align:top;
   width:100%;
}
</style> 
 </head> 
 <body> 
  <section class="container"> 
   <div class="row"> 
    <aside class="supplement"> 
     <h2>Lorem i</h2> 
    </aside> 
    <section class="details"> 
     <h2>Lorem ipsum </h2> 
     <p>Lorem i</p> 
     <p>Lorem i</p> 
     <p>Lorem i</p> 
     <p>Lorem i</p> 
     <p>Lorem i</p> 
     <p>Lorem i</p> 
     <p>Lorem i</p> 
     <p>Lorem i</p> 
     <p>Lorem i</p> 
     <p>Lorem i</p> 
     <p>Lorem i</p> 
    </section> 
   </div> 
  </section>  
 </body>
</html>

Related Tutorials