Positionieren von Boxen

[Kurschi]

Hallo,

hier seht ihr mein Layout: www.kurschi.de.

Ich möchte das alle vier Boxen im Bodybereich erscheinen und man nicht scrollen muss. Die Grüne sollte runter gezogen werden bis zur blauen box, die graue ebenso. Die relativen Verhältnisse solten möglichst in anderen Auflösungen gleichbleiben.
Hier mal der Quelltext:

<style type="text/css">

body{ padding:10px;
background:lightGray;}

#header{ background:red;
width:100%;
height:80px;
margin-bottom:5px;}

#menu{ float:left;
clear:inline;
background-color:green;
width:200px;
margin-right:5px;
height:100%}

#main{ background-color:gray;
overflow:auto;
height:100%;}

#footer{ clear:inline;
background-color:blue;
margin-top:5px;}
</style>

Wie kriege ich das hin unabhängig vom Inhalt?

Gibt es ein Format für Schriftarten, dass Auflösungsunabhängig ist, dass heißt dass die Schrift bei geringerer Auflösung kleiner wird, das also das Verhältnis Box Schrift immer gleich bleibt?

Vielen Dank im Voraus

mfg Kurschi