[Altair]

Three Column template. 
No attribution needed. 
Preview: http://justaparadox.com/columnlayout.html

Code:

<style>
   
   body{
margin:0;
padding:0;
color:#000;
   }
   
   
   .header{

color:#fff;
background:#999;
padding:30px;
position: fixed;
width:100%;
   }
   
   .main{

background:transparent url(http://orig09.deviantart.net/d6e6/f/2015/003/b/d/white_background_by_funkichkn-d8ceprb.jpg)
repeat-x 0 0;


padding:28.2px;
overflow: scroll;
font-family: "Arial";
line-height: 13.3px;
font-size: 12.5px;

   }
   
   .inner-main{

padding:10px;
width:100%;
   }
   
   
   
   .columnsfit{

width:27.111%;
margin:0;
float:left;
padding:28px;
height: auto;
border-left: 1.5px dashed #000;
border-right: 1.5px dashed #000;
  }
   
   
   .columnsfit2{


width:29.23%;
margin:0;
float:left;
padding:28px;
height: auto;

border-right: 1.5px dashed #000;


   }
   
   
   .columnsfit3{

width:27.111%;
margin:0;
float:left;
padding:28px;
height: auto;
border-right: 1.5px dashed #000;


   }
   
   .footer{
clear:both;
   }
   
   
   
   /* here here*/
   










</style>
<div class="header"></div>
<div class="main">
   <div class="inner-main">

   <div class="columnsfit">

<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.
Etiam ut aliquam nisi. Ut vehicula volutpat sollicitudin. Proin suscipit, eros nec porttitor venenatis, orci massa laoreet nulla, a congue nisi augue non augue. Nam ultricies tincidunt pellentesque. Donec purus leo, bibendum id egestas sit amet, posuere nec urna.

Maecenas tristique, nunc quis luctus auctor, lectus ligula accumsan enim, quis tincidunt erat urna in neque. Quisque a diam enim. Aliquam eget diam vitae dui porttitor finibus. Curabitur suscipit neque vitae mauris dictum, ac aliquam sapien faucibus. Etiam eleifend libero arcu, id tristique lorem elementum tincidunt. Fusce ac massa luctus, venenatis quam sed, fringilla enim. Aenean leo diam, scelerisque efficitur elit vel, pellentesque posuere turpis. Pellentesque sed elit nulla. Curabitur odio lorem, ultrices in tincidunt vel, sodales quis lectus. Nam felis nisl, tempus eget arcu sit amet, semper consectetur enim. Duis sodales enim in ipsum pharetra pharetra.
Suspendisse ac congue mauris. Maecenas semper pulvinar risus, in commodo lectus maximus scelerisque. Sed eget semper nunc.
Etiam ut aliquam nisi. Ut vehicula volutpat sollicitudin. Proin suscipit, eros nec porttitor venenatis, orci massa laoreet nulla, a congue nisi augue non augue. Nam ultricies tincidunt pellentesque. Donec purus leo, bibendum id egestas sit amet, posuere nec urna.

Suspendisse ac congue mauris. Maecenas semper pulvinar risus, in commodo lectus maximus scelerisque. Sed eget semper nunc.
Etiam ut aliquam nisi. Ut vehicula volutpat sollicitudin. Proin suscipit, eros nec porttitor venenatis, orci massa laoreet nulla, a congue nisi augue non augue. Nam ultricies tincidunt pellentesque. Donec purus leo, bibendum id egestas sit amet, posuere nec urna.

Suspendisse ac congue mauris. Maecenas semper pulvinar risus, in commodo lectus maximus scelerisque. Sed eget semper nunc.
Etiam ut aliquam nisi. Ut vehicula volutpat sollicitudin. Proin suscipit, eros nec porttitor venenatis, orci massa laoreet nulla, a congue nisi augue non augue. Nam ultricies tincidunt pellentesque. Donec purus leo, bibendum id egestas sit amet, posuere nec urna.

Suspendisse ac congue mauris. Maecenas semper pulvinar risus, in commodo lectus maximus scelerisque. Sed eget semper nunc.
Etiam ut aliquam nisi. Ut vehicula volutpat sollicitudin. Proin suscipit, eros nec porttitor venenatis, orci massa laoreet nulla, a congue nisi augue non augue. Nam ultricies tincidunt pellentesque. Donec purus leo, bibendum id egestas sit amet, posuere nec urna.



   </div>
   
    <div class="columnsfit2">

<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.
Etiam ut aliquam nisi. Ut vehicula volutpat sollicitudin. Proin suscipit, eros nec porttitor venenatis, orci massa laoreet nulla, a congue nisi augue non augue. Nam ultricies tincidunt pellentesque. Donec purus leo, bibendum id egestas sit amet, posuere nec urna.

Maecenas tristique, nunc quis luctus auctor, lectus ligula accumsan enim, quis tincidunt erat urna in neque. Quisque a diam enim. Aliquam eget diam vitae dui porttitor finibus. Curabitur suscipit neque vitae mauris dictum, ac aliquam sapien faucibus. Etiam eleifend libero arcu, id tristique lorem elementum tincidunt. Fusce ac massa luctus, venenatis quam sed, fringilla enim. Aenean leo diam, scelerisque efficitur elit vel, pellentesque posuere turpis. Pellentesque sed elit nulla. Curabitur odio lorem, ultrices in tincidunt vel, sodales quis lectus. Nam felis nisl, tempus eget arcu sit amet, semper consectetur enim. Duis sodales enim in ipsum pharetra pharetra.
Suspendisse ac congue mauris. Maecenas semper pulvinar risus, in commodo lectus maximus scelerisque. Sed eget semper nunc.
Etiam ut aliquam nisi. Ut vehicula volutpat sollicitudin. Proin suscipit, eros nec porttitor venenatis, orci massa laoreet nulla, a congue nisi augue non augue. Nam ultricies tincidunt pellentesque. Donec purus leo, bibendum id egestas sit amet, posuere nec urna.

Suspendisse ac congue mauris. Maecenas semper pulvinar risus, in commodo lectus maximus scelerisque. Sed eget semper nunc.
Etiam ut aliquam nisi. Ut vehicula volutpat sollicitudin. Proin suscipit, eros nec porttitor venenatis, orci massa laoreet nulla, a congue nisi augue non augue. Nam ultricies tincidunt pellentesque. Donec purus leo, bibendum id egestas sit amet, posuere nec urna.




   </div>
   
   
     <div class="columnsfit3">

<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.
Etiam ut aliquam nisi. Ut vehicula volutpat sollicitudin. Proin suscipit, eros nec porttitor venenatis, orci massa laoreet nulla, a congue nisi augue non augue. Nam ultricies tincidunt pellentesque. Donec purus leo, bibendum id egestas sit amet, posuere nec urna.

Maecenas tristique, nunc quis luctus auctor, lectus ligula accumsan enim, quis tincidunt erat urna in neque. Quisque a diam enim. Aliquam eget diam vitae dui porttitor finibus. Curabitur suscipit neque vitae mauris dictum, ac aliquam sapien faucibus. Etiam eleifend libero arcu, id tristique lorem elementum tincidunt. Fusce ac massa luctus, venenatis quam sed, fringilla enim. Aenean leo diam, scelerisque efficitur elit vel, pellentesque posuere turpis. Pellentesque sed elit nulla. Curabitur odio lorem, ultrices in tincidunt vel, sodales quis lectus. Nam felis nisl, tempus eget arcu sit amet, semper consectetur enim. Duis sodales enim in ipsum pharetra pharetra.
Suspendisse ac congue mauris. Maecenas semper pulvinar risus, in commodo lectus maximus scelerisque. Sed eget semper nunc.
Etiam ut aliquam nisi. Ut vehicula volutpat sollicitudin. Proin suscipit, eros nec porttitor venenatis, orci massa laoreet nulla, a congue nisi augue non augue. Nam ultricies tincidunt pellentesque. Donec purus leo, bibendum id egestas sit amet, posuere nec urna.




   </div>

   </div>
   
   <div class="footer">

   </div>
   </div>
                                       <!-- -->            

[Darth-Apple]

Thanks for sharing! I like that it includes a header already. Templates such as these are always a huge time saver for small projects and pages that need to be completed quickly.

Also, welcome to the forums!

[Harry K.]

Hey man, nice share.

I'm a little curious as to why you've decided to use a large image of pure white to create a white background? You could simply use "background: #fff;".

Have you tried looking into flexbox?

You could save a lot of time and stress (it does for me ) using flexbox, achieving this sort of layout is hard no more!

I'm going to show you the changes I would make to your CSS, might save you some time.

....
 
.main{
/*background:transparent url(http://orig09.deviantart.net/d6e6/f/2015...8ceprb.jpg)
repeat-x 0 0;*/

    background: #fff;
    padding:28.2px;
    /*overflow: scroll;  Why add a scroll bar when there is no need? */
    font-family: "Arial";
    line-height: 13.3px;
    font-size: 12.5px;

}
 
.inner-main{
    padding:10px;
    width:100%;
    display: flex;
    justify-content: space-evenly;
}
 
 
 
.inner-main > * {     /* Use > * to select all direct children of the .inner-main class. */
    width: 100%;

    border-left: 1.5px dashed #000;
    border-right: 1.5px dashed #000;
    padding: 20px;
}


/* Remove all .columnsfit classes. */

 
.footer{
    clear:both;
}

Then all it takes to make this layout responsive is this:

Code:

@media (max-width: 960px) {
    .inner-main {
        flex-wrap: wrap;
    }
}

Be sure to add the responsive meta tag to inside your <head> to tell the browser your page is optimised for mobile.

Code:

<meta name="viewport" content="width=device-width">

Look at the difference: https://i.imgur.com/NYhunuw.mp4

Forgot to add the borders in the vid, try this:

Code:

.inner-main > * {
   border-left: 3px dashed black;
}
.inner-main > *:last-child {
   border-right: 3px dashed black;
}
@media (max-width: 960px) {
   .inner-main > * {
     border-right: 3px dashed black;
   }
}

[Thomas]

What's stranger is adding a background image but having it be completely transparent. Still useful thanks.

[SpookyZalost]

heh that's how I started out before trimming it down to two columns, and eventually just one by replacing all columns with frames so I could separate the side menu from the site pages.

good template though, works well!

[Altair]

I'm a little curious as to why you've decided to use a large image of pure white to create a white background? You could simply use "background: #fff;".

I made this template a couple years ago. I think I did that because I was convinced the background was a different color. Don't exactly remember.  
--
Thank you for the feedback and comments. I appreciate the time you took to leave your advice and tips. 
 I guess its time to get up to date with standard css with flexboxes and other current standards.

[effone]

A note to drop: CSS Grid is another splendid choice of bleeding edge.

[Thomas]

heh that's how I started out before trimming it down to two columns, and eventually just one by replacing all columns with frames so I could separate the side menu from the site pages.

good template though, works well!

Frames nowadays aren't the ideal way of solving the issue of navigation bars and other elements you want to keep consistent across multiple pages on a site. I personally just use a php include.

[SpookyZalost]

heh that's how I started out before trimming it down to two columns, and eventually just one by replacing all columns with frames so I could separate the side menu from the site pages.

good template though, works well!

Frames nowadays aren't the ideal way of solving the issue of navigation bars and other elements you want to keep consistent across multiple pages on a site. I personally just use a php include.

I guess?

php just adds another layer to everything though while frames kinda act like a more basic way to do it, it seems to work pretty well and over all weight and loading times are low, but that's just my experience with it... and why ignore a method that's worked for 20+ years?