Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5

Two-column template

#1
Two Column Template. 
No attribution needed. 
Preview: http://justaparadox.com/twolayout.html
Code:
<style>


   body{
     font-family: "Arial";
     line-height: 13.3px;
     font-size: 12.5px;
     color:#000;
}
   
   
   .leftHalf{
       float:left;
       width:50%;
       height:100%;
       background:#F5F5F5;
       outline: 10px solid #F5F5F5;
   }
   
   .leftHalf-left{
       width: 45%;
       float:left;
   }
   
   
   .leftHalf-right{
       
       width:45%;
       float:right;
       
   }
   
   
   .contentinside {
       
       width: 90%;
       margin: 0 auto;

 }
   
   
   .rightHalf {
       
        width:46%;
       height:100%;
       outline: 10px solid #fff;
       float:right;
       background:transparent url(http://orig09.deviantart.net/d6e6/f/2015/003/b/d/white_background_by_funkichkn-   d8ceprb.jpg)
repeat-x 0 0;
/* use
          overflow:scroll;
... if you have text extending the right side of your page..
And you want the text to scroll


*/

   }
   
   .img{
       
       width:249px;
       float:left;
       padding:11px;
   }

   
   h2{
       text-align: justify;
   }
 
</style>
   <div class="leftHalf">
       <div class="contentinside">
           <div class="leftHalf-left">
               <h2>header</h2>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis quis nulla ut malesuada. Nullam ullamcorper neque
       sed lacus lacinia egestas. Nullam malesuada mattis purus sit amet malesuada. Etiam porta a ligula eu feugiat. Mauris interdum ut odio nec posuere.
       Integer quam risus, egestas nec nibh ac, convallis tempor quam. Fusce elementum ex sem, hendrerit aliquet nunc tincidunt sed. Quisque ullamcorper orci mauris, eget aliquam ante pretium eu. Vestibulum ac tortor finibus, accumsan urna elementum, congue nulla. Nulla at ante quis erat pretium tincidunt sed sit amet justo. Duis eu nibh a sapien pellentesque interdum vel nec orci. Pellentesque facilisis risus quis justo bibendum auctor. Vestibulum sit amet nulla tellus. Pellentesque dapibus, ligula eget luctus dapibus, urna est luctus orci, vel vulputate nunc lectus sit amet risus. Sed eget porta lectus, eget blandit dolor.
   Suspendisse ac congue mauris. Maecenas semper pulvinar risus, in commodo lectus maximus scelerisque. Sed eget semper nunc.  Integer quam risus, egestas nec nibh ac, convallis tempor quam. Fusce elementum ex sem, hendrerit aliquet nunc tincidunt sed. Quisque ullamcorper orci mauris, eget aliquam ante pretium eu. Vestibulum ac tortor finibus, accumsan urna elementum, congue nulla. Nulla at ante quis erat pretium tincidunt sed sit amet justo. Duis eu nibh a sapien pellentesque interdum vel nec orci. Pellentesque facilisis risus quis justo bibendum auctor. Vestibulum sit amet nulla tellus. Pellentesque dapibus, ligula eget luctus dapibus, urna est luctus orci, vel vulputate nunc lectus sit amet risus. Sed eget porta lectus, eget blandit dolor.

           </div>
           
           <div class="leftHalf-right">
               <h2>header</h2>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis quis nulla ut malesuada. Nullam ullamcorper neque
       sed lacus lacinia egestas. Nullam malesuada mattis purus sit amet malesuada. Etiam porta a ligula eu feugiat. Mauris interdum ut odio nec posuere.
       Integer quam risus, egestas nec nibh ac, convallis tempor quam. Fusce elementum ex sem, hendrerit aliquet nunc tincidunt sed. Quisque ullamcorper orci mauris, eget aliquam ante pretium eu. Vestibulum ac tortor finibus, accumsan urna elementum, congue nulla. Nulla at ante quis erat pretium tincidunt sed sit amet justo. Duis eu nibh a sapien pellentesque interdum vel nec orci. Pellentesque facilisis risus quis justo bibendum auctor. Vestibulum sit amet nulla tellus. Pellentesque dapibus, ligula eget luctus dapibus, urna est luctus orci, vel vulputate nunc lectus sit amet risus. Sed eget porta lectus, eget blandit dolor.
  Integer quam risus, egestas nec nibh ac, convallis tempor quam. Fusce elementum ex sem, hendrerit aliquet nunc tincidunt sed. Quisque ullamcorper orci mauris, eget aliquam ante pretium eu. Vestibulum ac tortor finibus, accumsan urna elementum, congue nulla. Nulla at ante quis erat pretium tincidunt sed sit amet justo. Duis eu nibh a sapien pellentesque interdum vel nec orci. Pellentesque facilisis risus quis justo bibendum auctor. Vestibulum sit amet nulla tellus. Pellentesque dapibus, ligula eget luctus dapibus, urna est luctus orci, vel vulputate nunc lectus sit amet risus. Sed eget porta lectus, eget blandit dolor.


           </div>
       </div>
       
       
   </div>
   
   <div class="contentinside">
       <div class="righthalf">
          <h2>header</h2>

                <img src="http://oi63.tinypic.com/wtc935.jpg" class="img">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis quis nulla ut malesuada. Nullam ullamcorper neque
       sed lacus lacinia egestas. Nullam malesuada mattis purus sit amet malesuada. Etiam porta a ligula eu feugiat. Mauris interdum ut odio nec posuere.
       Integer quam risus, egestas nec nibh ac, convallis tempor quam. Fusce elementum ex sem, hendrerit aliquet nunc tincidunt sed. Quisque ullamcorper orci mauris, eget aliquam ante pretium eu. Vestibulum ac tortor finibus, accumsan urna elementum, congue nulla. Nulla at ante quis erat pretium tincidunt sed sit amet justo. Duis eu nibh a sapien pellentesque interdum vel nec orci. Pellentesque facilisis risus quis justo bibendum auctor. Vestibulum sit amet nulla tellus. Pellentesque dapibus, ligula eget luctus dapibus, urna est luctus orci, vel vulputate nunc lectus sit amet risus. Sed eget porta lectus, eget blandit dolor.
  Integer quam risus, egestas nec nibh ac, convallis tempor quam. Fusce elementum ex sem, hendrerit aliquet nunc tincidunt sed. Quisque ullamcorper orci mauris, eget aliquam ante pretium eu. Vestibulum ac tortor finibus, accumsan urna elementum, congue nulla. Nulla at ante quis erat pretium tincidunt sed sit amet justo. Duis eu nibh a sapien pellentesque interdum vel nec orci. Pellentesque facilisis risus quis justo bibendum auctor. Vestibulum sit amet nulla tellus. Pellentesque dapibus, ligula eget luctus dapibus, urna est luctus orci, vel vulputate nunc lectus sit amet risus. Sed eget porta lectus, eget blandit dolor.
     
 

       </div>
   </div>
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  Three Column template Altair 8 9,049 February 16th, 2019 at 6:56 PM
Last Post: SpookyZalost



Users browsing this thread: 1 Guest(s)

Dark/Light Theme Selector

Contact Us | Makestation | Return to Top | Lite (Archive) Mode | RSS Syndication 
Proudly powered by MyBB 1.8, © 2002-2024
Forum design by Makestation Team © 2013-2024