Growing column using css - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Growing column using css

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

#wrapper {<!--from  ww  w  .ja v a 2  s .  c  o m-->
   background-color: blue;
   color: white;
   border: 5px solid red;
}
#sidebar {
   width: 200px;
   float: right;
   background-color: yellow;
   height: 250px; /* just to show height */
   color: black;
}


      </style> 
 </head> 
 <body> 
  <div id="wrapper"> 
   <div id="sidebar">
     SIDEBAR CONTENT HERE. 
   </div> 
   <p>Text! Text! Text!</p> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet ligula a lacus auctor imperdiet facilisis a augue. Donec aliquam mi nec diam porttitor rutrum. Morbi feugiat euismod feugiat. Suspendisse ac tellus augue. Suspendisse vestibulum tortor et justo porttitor sollicitudin. Pellentesque pharetra pulvinar magna. Nullam convallis tortor tellus. In aliquet tellus id erat aliquam eget rutrum mauris placerat. Vivamus aliquam, diam in adipiscing gravida, tortor nibh rhoncus elit, interdum tristique purus nunc a nisl. Aliquam imperdiet purus ornare lectus rutrum id vestibulum diam consectetur. Vivamus nec dui mi, sed placerat dolor. Donec aliquet sem quis mi ultricies malesuada. Nunc mi augue, aliquam vitae tempor sit amet, ultricies id nisi. Mauris feugiat turpis vel magna egestas et bibendum nunc vestibulum. Nunc tincidunt turpis et sem venenatis sed auctor augue congue.</p> 
   <p>Maecenas in fringilla ante. Mauris ac mi lorem. Pellentesque erat magna, egestas non ornare quis, faucibus id ante. Pellentesque eu elit vel felis tempor fermentum quis eu nibh. Nunc sed metus velit, vitae luctus nisi. In hac habitasse platea dictumst. Curabitur lacinia commodo aliquam. Vivamus vel nulla non quam dictum bibendum vel et quam.</p> 
   <p>Phasellus pellentesque eleifend ante id pulvinar. Nulla vel eros non tellus vehicula vulputate a in elit. Sed dignissim pulvinar libero vitae semper. Vestibulum condimentum purus quis nulla adipiscing vel pellentesque felis mollis. Donec gravida semper augue vitae euismod. Cras ultrices dapibus risus eu volutpat. Sed scelerisque mi sit amet arcu varius iaculis. Maecenas et arcu in leo consectetur hendrerit vel et leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In posuere viverra urna, et elementum urna varius non. Nunc gravida, lorem nec fringilla ultrices, ante arcu volutpat risus, ut rutrum diam magna in risus. Vestibulum non eros vitae massa tincidunt mollis tincidunt sit amet enim. Vivamus ultrices ullamcorper accumsan. Ut sollicitudin, ante ac varius tempor, arcu risus scelerisque eros, et lobortis urna turpis nec augue. Donec nec ante ullamcorper sem semper varius ac vel dui. Pellentesque sem purus, accumsan quis sodales at, laoreet semper libero.</p> 
  </div>  
 </body>
</html>

Related Tutorials