Set width of column in two-column CSS lay out - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Set width of column in two-column CSS lay out

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

#header,<!--from w  w w.j a  va  2s. c om-->
#footer {
   width: 460px;
   float: left;
   margin: 5px;
   padding: 5px;
   background: #ff9900;
   font-size: 11px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

#container {
   width: 480px;
}

#leftcolumn {
   width: 220px;
   float: left;
   margin: 5px;
   padding: 5px;
   background: #BBE3A8;
   font-size: 11px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

#rightcolumn {
   width: 220px;
   float: right;
   margin: 5px;
   padding: 5px;
   background: #6699ff;
   font-size: 11px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

#leftbottomcolumn {
   width: 220px;
   float: left;
   margin: 5px;
   padding: 5px;
   background: #BBE3A8;
   font-size: 11px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

#rightbottomcolumn {
   width: 220px;
   float: right;
   margin: 5px;
   padding: 5px;
   background: #BBE3A8;
   font-size: 11px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

.clear {
   clear: both;
}

      </style> 
 </head> 
 <body> 
  <div id="header" style="min-height: 100px;"> 
   <h3>Hello World</h3> 
  </div> 
  <div id="container"> 
   <div id="leftcolumn" style="min-height: 300px;"> 
    <h2>content</h2> 
   </div> 
   <div id="rightcolumn" style="min-height: 300px;"> 
    <h2>sidebar</h2> 
   </div> 
   <div class="clear"></div> 
  </div> 
  <div id="container"> 
   <div id="footer" style="min-height: 100px;"> 
    <h2>Features</h2> 
   </div> 
   <div class="clear"></div> 
  </div>  
 </body>
</html>

Related Tutorials