Columns as backgrounds and expand to match page height - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Columns as backgrounds and expand to match page height

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

html, body {
   height: 100%;
   overflow: hidden;
   position: relative;
}
#bluecol {<!-- w  w  w.  j  ava  2  s. co  m-->
   height:100%;
   background-color: red;
   display: inline;
   float: none;
   left: 0px;
   overflow-x: hidden;
   overflow-y: hidden;
   position: absolute;
   top: 0px;
   width: 50%;
   z-index: -5;
}
#yellowcol {
   height:100%;
   background-color: rgb(255, 204, 0);
   display: inline;
   float: none;
   right:0px;
   overflow-x: hidden;
   overflow-y: hidden;
   position: absolute;
   top: 0px;
   width: 50%;
   z-index: -5;
}
#container {
   background-color:#E5ECFB;
   font-family:'calibri';
   margin:10px;
   overflow:hidden;
   z-index:5;
   font-size:medium;
   height: 100%;
}


      </style> 
 </head> 
 <body> 
  <div id="bluecol"></div> 
  <div id="yellowcol"></div> 
  <div id="container">
    whatever 
  </div>  
 </body>
</html>

Related Tutorials