Hi, Welcome to Sitepoint 
You want to avoid using height especially when holding fluid text content. Elements should be allowed to grow with text resize or with content and adding height to elements is the biggest mistake that beginners make.
Webpages are fluid and can be as long as they need be so don't start of by trying to restrict them. If you must use a height then its always better to use ems so that text resize isn't an issue.
In a 2 column layout its easier to float the two columns and then set clear:both on the footer so that it sits below. A webpage should be as fluid a s possible and adding or removing content should not create any issues for you.
If you have set a height on your content and then you want to add half a dozen paragraphs you would have to change the height every time. Just let the content dictate the height and things will work smoothly because one element flows to the next.
Here is a quick revision with some bright colours so you can see where everything is.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, form {
margin:0;
padding:0
}
ul {
list-style:none
}
/* CSS Document */
#container {
width: 960px;
margin:auto;
background:red;
}
#header {
width:960px;
background:blue;
}
#menu {
width:960px;
background:green;
}
#content {
float:left;
width:800px;
background:orange;
}
#sidebar {
width: 150px;
float:right;
background:teal;
}
#footer {
width:960px;
clear:both;
background:yellow;
}
</style>
</head>
<body>
<div id="container">
<h1 id="head">Header</h1>
<ul id="menu">
<li>menu</li>
</ul>
<div id="content">
<h2>Main content</h2>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div id="sidebar">
<h3>Side content</h3>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
If you want equal columns then look at faux column techniques using a background image.
Bookmarks