Here is a blank two column (Right) CSS template which you can use to get you started on building a website. All of the main divs have been styled and the layout is avaliable for you to simply paste into your favorite code editor and begin designing it to your liking. You'll find the full source for the blank CSS template at the bottom of the page. However please read the whole page instead of skipping to the source code, there's a couple of statements about certain CSS attributes you might want to change
The following blank CSS template is Two Column (Right) which uses a personal method of mine that makes the content and sidebar strech together so you get no weird looking heights, something like this:
You can use the template as it is now. All of the divs has been coded and set up so if you were to copy and paste it into a code editor right now (Or even a html page and view it) it would work fine. However please read the couple of notes below. There are a couple of personal touches to the template that you may not want, so read the notes below to identify these and how to change or not use them at all.
Template Notes:
The template will work fine out of the box so to speak but there are a couple of things worth mentioning:
The template itself is centered but if you want to remove this simply take out the margin:0px auto; from the wrapper in the CSS
Padding has been set on the content and sidebar, you may want to change these as you develop the template to your own liking
Because the content and sidebar strech to the the same height because im using a certain method to change the colour of the sidebar you will need to change the background colour set on the container this background:#EAEAEA;
Full Source Code for Two Column (Right) Template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Blank CSS Template (2 Column Right)</title>
<style type="text/css">
body { margin:0; padding:0; line-height: 1.5em; font-family:Geneva, Arial, Helvetica, sans-serif; }
#wrapper { width:900px; margin:0px auto; }
#header { border:1px solid #000; height:135px; background:#DEDEDE; }
h1 { margin-top:45px; }
#container { background:#EAEAEA; border-right:1px solid #000; }
.content { border:1px solid #000; border-top:none; padding:20px 20px 20px 20px; background:#fff; width:590px; }
.sidebar1 { padding:5px 5px 5px 5px; float:right; width:250px; font-size:13px; }
#footer { background:#000; color:#fff; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Blank CSS Template Header</h1>
</div>
<div id="container">
<div class="sidebar1">
<h5>Blank CSS Template Sidebar</h5>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum pharetra neque, et condimentum justo euismod sodales. Maecenas vitae lectus quis purus porttitor luctus. Etiam</p>
<h5>Blank CSS Template Sidebar</h5>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum pharetra neque, et condimentum justo euismod sodales. Maecenas vitae lectus quis purus porttitor luctus. Etiam</p>
</div>
<div class="content">
<h3>Blank CSS Template Content</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum pharetra neque, et condimentum justo euismod sodales. Maecenas vitae lectus quis purus porttitor luctus. Etiam accumsan, felis id mollis dapibus, nibh risus laoreet odio, a viverra arcu tellus nec est. Fusce dui dui, hendrerit eget commodo ut, sollicitudin eget nisi. Phasellus magna leo, aliquam ut interdum ut, sollicitudin in urna. Vivamus laoreet nibh sit amet turpis fermentum facilisis. Curabitur mattis, felis ut interdum fringilla, est tortor mollis velit, ut imperdiet ligula mauris ac eros. Aliquam et metus iaculis lectus euismod molestie dapibus eget dui. Morbi posuere sagittis nibh non pharetra. Quisque fermentum, dolor at mattis feugiat, quam purus tincidunt sem, sed euismod ipsum felis at ante. Donec nunc augue, pellentesque tempus pulvinar nec, fringilla id nulla. In et nibh a nulla placerat commodo id et velit. Nullam aliquam ante quis arcu hendrerit interdum. Donec adipiscing sapien quis sem malesuada commodo ac ut libero. Etiam fermentum accumsan neque at scelerisque. </p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque venenatis, mi id pretium rhoncus, leo nulla ultricies quam, sed porta ligula risus sit amet felis. Cras vitae dictum ligula. Phasellus eros quam, ornare a euismod at, cursus at nibh. Vivamus vel lacus non leo commodo scelerisque. Nam sed est sem. Sed nisi nibh, imperdiet quis dapibus malesuada, lacinia sit amet tellus. Aliquam non nisl libero. Praesent mi enim, fermentum eu interdum vitae, sodales ac mi. In sagittis, arcu ut venenatis rhoncus, urna massa tempor lacus, sit amet dictum augue enim vel sapien. Aenean semper ullamcorper ornare. Maecenas id libero in nulla sagittis blandit. </p>
<p>Nulla euismod commodo libero sit amet viverra. Fusce mauris elit, gravida sit amet luctus eu, sodales sit amet ipsum. Donec tincidunt tincidunt quam, vel faucibus magna tristique et. Duis quis enim arcu. Nam varius luctus tempus. Suspendisse potenti. Duis iaculis eleifend diam. Etiam volutpat tincidunt dolor, id dignissim risus pellentesque in. Nam ullamcorper felis sed nisl luctus tincidunt. In metus tellus, pretium in fermentum nec, posuere vitae turpis. Nulla facilisi. Aenean id purus eros, sed dignissim massa. Sed condimentum mollis nunc nec aliquet. Pellentesque porta arcu vel massa rutrum pellentesque. Aliquam consectetur volutpat sodales. Vivamus porttitor pellentesque elit, nec vestibulum lacus vestibulum laoreet. Aliquam erat volutpat. Cras molestie tellus non dolor volutpat fringilla. Morbi ut justo justo, eu euismod sapien. Curabitur iaculis metus in ligula ultrices volutpat. </p>
</div>
</div>
<div id="footer">Blank CSS Template Footer </div>
</div>
</body>
</html>
All of the CSS is within the head tags but I strongly recommend you put this into a external stylesheet for when you use and change it around. I simply put CSS information in the head tags in examples because I can't predict the filename of your external stylesheet!
Website Layouts with sidebars
Fire G
June 25th
A problem with your code James is that it assumes the left column will ALWAYS be longer than the right.
The only real way to fix this is to add an image that's the same width as both columns and repeat the image along the y axis to create the faux column view.
Another pure CSS way is to position the columns absolute and the container be relative. (I think that's right, but it's been a long time since I've used that method).
James
June 26th
Thats true, I should probably state that in design notes. I think I'll make another revision where it will be a fixed layout