Create two column div layout with tall left column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Create two column div layout with tall left column

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%;
   font-size: 16px;
   margin: 0;
   padding: 0;
}
#container {<!--   w w  w  .  j a va 2 s. c om-->
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
   min-width: 500px;
}
#nav {
   width: 20%;
   height: 100%;
   float: left;
   background-color: #FFAD73;
}
#content {
   width: 80%;
   float: left;
   background-color: #73C5FF;
}
#container ul {
   padding: 20px;
   margin: 0px auto;
}
li { 
   list-style: none;
}


      </style> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="nav"> 
    <ul> 
     <li> <a href="/">Home</a> </li> 
     <li> <a href="about.jsp">About</a> </li> 
     <li> <a href="portfolio.jsp">Portfolio</a> </li> 
     <li> <a href="contact.jsp">Contact</a> </li> 
    </ul> 
   </div> 
   <div id="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec efficitur augue. Nunc eu odio vel nisl posuere hendrerit. Phasellus rhoncus, erat consectetur consectetur fermentum, velit mauris tristique metus, sed ultricies eros urna vitae dolor. Phasellus augue turpis, pharetra ac suscipit at, ultrices cursus lacus.</p> 
    <p>Sed sit amet consequat felis. Nulla commodo, nibh eget lacinia rhoncus, nibh urna auctor risus, id mattis ipsum velit ut augue. Etiam venenatis dui nec nisi aliquam mollis. Sed eu massa interdum, ullamcorper felis ac, maximus enim. Quisque gravida non nisi vitae dignissim. Aliquam erat volutpat. Quisque a libero sodales risus feugiat finibus sed ac nisl. Cras et orci vitae erat posuere venenatis vitae vitae mi. Curabitur imperdiet urna id neque pellentesque, vel semper nulla rutrum. </p> 
   </div> 
   <div style="clear:both"></div> 
  </div>  
 </body>
</html>

Related Tutorials