Salve a tutti sono nuovo del forum e sto facendo qualche prova per creare un siterello...

finora il risultato è stato questo:
codice:
<!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>Documento senza titolo</title>
<link rel="stylesheet" href="style/BasicStyle.css" media="screen" type="text/css" />
</head>

<body>
<div id="container">
	<div id="header">
		header
	</div>
	<div id="menu">
		1

		2
	</div>
	<div id="main">
		asda

		aa

		aa

		aa

		aa

		aa

		aa

		aa

		aa

		aa

		aa

		aa

		a	</div>
		<div id="footer">
			FOOTER
		</div>
</div>
</body>
</html>
con il seguente CSS:
codice:
/* CSS Document */
BODY {
	background-color: #CCCCCC;
	color: #000000;
	margin: 0;
	padding: 0;
	height: 100%;
}

#container {
	width: 60%;
	height: auto;
	margin-left: 20%;
	background-color: #78FFFF;
	border: #000000 solid;
	position: relative;/
}
#header{
	height: 100px;;
	width: 100%;
	background-color: #0000FF;
	color: #000000;
	font-weight: bold;
	position: absolute;
	top: 0;
	font-size: 2em;
	text-align: center;
}
#menu{
	height: auto;
	float: left;
	position:absolute;
	top: 100px;
	width: 15%;
	background-color: #FF0000;
}
#main {
	background-color: #00FF00;
	color: #FF00FF;
	height: 100%;
	margin-left: 15%;
}
#footer {
	background-color: #0000FF;
	color: #FF00FF;
	width: 100%;
	height: 30px;
	text-align: center;
	position: relative;
	bottom: 0;
}
Il risultato lo potete trovare qui

ora i miei problemi sono questi:

1) come faccio a far andare il colore rosso fino al footer in modo da non vedere l'azzurrino del container che c'è sotto?
2) Il div header va a coprire le prime parole del div main, come lo posso risolvere?

io saprei come fare tutto quanto usando dimensioni fisse per ogni elemento o una struttura a tabelle ma vorrei fare in modo che sia + "flessibile"

grazie