CSS layout with fixed and liquid two columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

CSS layout with fixed and liquid two columns

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <!--[if IE]><!--from w  w  w  .  j a v a2 s . com-->
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
  <style>
{
   padding: 0;
   margin: 0px;
   color: white;
}
html, body {
   height: 100%;
   width: 100%;
}
#header {
   background: black;
   height: 100px;
}
#content {
   width:100%;
   border:5px solid red;
   overflow:hidden;
   position:relative;
}
#left {
   background: pink;
   height: 100%;
   width: 130px;
   float: left;
}
#right {
   background: red;
   height: 100%;
   float: left;
   width:100%;
   position:absolute;
   margin-left:130px;
}

      </style> 
 </head> 
 <body> 
  <div id="header">
    My Header 
  </div> 
  <div id="content"> 
   <div id="left">
     Left container 
   </div> 
   <div id="right">
     Right container 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials