Two Column layout expanding with content inside - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Two Column layout expanding with content inside

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

article {<!--from   ww  w  .j  av  a2s .  c om-->
   display:table;
   table-layout:fixed;
   width:80%;
   margin:auto;
}
article h1,
article div {
   display:table-cell;
   padding:0.5em;
}
article h1 {
   width:15%;
   border-right:solid;
}

article h1,
article div {
   box-shadow: 0 18px 0px -15px gray, 0 3px 0 rgba(0,0,0,0.25);
   background:rgba(0,0,0,0.15) linear-gradient(to bottom right, rgba(0,0,0,0.5),rgba(255,255,255,0.15));;
}


      </style> 
 </head> 
 <body translate="no"> 
  <article> 
   <h1>Title:</h1> 
   <div> 
    <p>text</p> 
    <p>text</p> 
    <p>test</p> 
    <p>test</p> 
   </div> 
  </article> 
  <article> 
   <h1>Title:</h1> 
   <div> 
    <p>text</p> 
    <p>test</p> 
   </div> 
  </article> 
  <article> 
   <h1>Title:</h1> 
   <div> 
    <p>text</p> 
    <p>test</p> 
    <p>text</p> 
    <p>test</p> 
    <p>text</p> 
    <p>test</p> 
   </div> 
  </article> 
  <article> 
   <h1>Title:</h1> 
   <div> 
    <p>text</p> 
    <p>text</p> 
    <p>test</p> 
    <p>test</p> 
   </div> 
  </article> 
  <article> 
   <h1>Title:</h1> 
   <div> 
    <p>text</p> 
    <p>test</p> 
   </div> 
  </article> 
  <article> 
   <h1>Title:</h1> 
   <div> 
    <p>text</p> 
    <p>test</p> 
    <p>text</p> 
    <p>test</p> 
    <p>text</p> 
    <p>test</p> 
   </div> 
  </article>  
 </body>
</html>

Related Tutorials