Text Multi-Column Vertical Scrolling - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Text Multi-Column Vertical Scrolling

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

#div_scroll {<!--   w w  w .j av a 2s .c  o m-->
   overflow-y: scroll;
   overflow-x: hidden;
   width: 400px; /*modify to suit*/
   height: 200px; /*modify to suit*/
}
#div_columns
{
   direction:rtl; 
   -moz-column-count: 2;
   -webkit-column-count: 2;
   column-count: 2
   overflow-y: hidden;
   overflow-x: hidden;
   width: 380x; 
   padding: 10px;
}
p{
   text-align: justify;
}


      </style> 
 </head> 
 <body> 
  <div runat="server" id="div_scroll"> 
   <div runat="server" id="div_columns"> 
    <p> test test test test test test test test test test 
    test test test test test test test test test test 
    test test test test test test test test test 
    test test test test test test test test test test 
    test test test test test test test test test 
    test test test test test test test test test 
    test test test test test test test test test test </p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials