My advice si to forget the ruler and download Blueprint . Blueprint is a CSS framework, which gives you a grid to place your elements and basic, clean typography.
One issue with the grid provided by Blueprint is that the footer doesn’t stick to the bottom of the page.
However, there is a hack for this, which described below.
How to keep the footer at the bottom of the page
Your CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
The HTML:
<html>
<head>
<link rel=”stylesheet” href=”layout.css” … />
</head>
<body>
<div>
<p>Your website content here.</p>
<div></div>
</div>
<div>
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
from Ryan Fait’s blog post .
