Two column web page with DIV overflows - 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 web page with DIV overflows

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, html {
   height:100%;
   background:lightgray;
   margin:40px;
}
#principal {<!--  w  ww . java  2 s . c  o m-->
   width:100%;
   height:100%;
   background:gray;
   display:table;
}
#my {
   width:25%;
   display:table-cell;
}
#colDerecha {
   width:75%;
   display:table-cell;
   background:gold;
}
*{
   box-sizing:border-box;
   -moz-box-sizing:border-box;
}


      </style> 
 </head> 
 <body> 
  <div id="principal"> 
   <div id="my">
     Some Content 
   </div> 
   <div id="colDerecha">
     Vivamus turpis leo, tempus non tincidunt non, ornare vitae mauris. Duis erat orci, sagittis id urna ut, vehicula imperdiet mi. Vivamus nec urna sed ligula iaculis hendrerit non pretium augue. Quisque sit amet iaculis elit. Nullam ut molestie erat. Duis auctor leo nibh, eu tempor eros molestie ut. Maecenas ac mi lorem. Etiam id bibendum lacus. Morbi volutpat eros ut odio fermentum, sit amet ultricies dolor ornare. Aenean fermentum luctus augue sed venenatis. Duis ac aliquam diam, malesuada hendrerit neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce lacinia dolor id semper dapibus. Aliquam vehicula ligula purus. 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials