Create a right column with another div - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Create a right column with another div

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

#maincontent{float:left;width:70%;background:#ee5}
#sidebar2,#sidebar1{float:right;width:30%;background:#5e5}
#footer {clear:both;background:#5ee}
#header{background:#55e}


      </style> 
 </head> <!--from w  w w. j  av  a 2 s .  c  om-->
 <body> 
  <div id="header">
    header content 
  </div> 
  <div id="sidebar1" class="side">
    sidebar1 content 
  </div> 
  <div id="maincontent">
    maincontent content 
  </div> 
  <div id="sidebar2" class="side">
    sidebar2 content 
  </div> 
  <div id="footer">
    footer content 
  </div>  
 </body>
</html>

Related Tutorials