Usando la información del ejemplo que me comentas, en el que la principal diferencia es que el footer está fuera del container, consigo el mismo resultado que antes: me sale todo bien, pero al crecer el main se me desborda por abajo.
  
Código:
 html {
	height: 100%;
}
body {
	text-align: center;
	margin: 0px;
	height: 100%;
	color: #fff;
	font-family: sans-serif;
	font-size: 12pt;
	background: url(Images/Back.jpg) top left;
}
#container {
	width: 750px;
	height: 100%;
	margin: 0px auto;
	text-align: left;
	background: url(Images/Fondo.jpg) top left;
	border: #000000 1px solid;
	border-width:0px 1px 0px 1px;
}
#header {
	background: url(Images/Cabecera.jpg) top left no-repeat;
	width: 750px;
	height: 231px;
	margin: 0px;
	padding: 0px;
}
#sidebar {
	width: 204px;
	float: left;
	margin: 0px;
	padding: 0px;
}
#main {
	float: left;
	width: 526px;
	margin: 0px 20px 20px 0px;
	padding: 0px;
}
#footer {
	clear: left;
	margin: 0px;
	padding: 0px;
	width: 750px;
	height: 26px;
	background: url(Images/BottomBarBack.gif) top left no-repeat;
	margin-top: -26px;
}
  Estoy desesperado con esto. Creo que la maquetación con CSS es demasiado complicada. Me estoy planteando maquetar con tablas y si no valida, pues mala suerte. Me aconsejais cambiarme a tablas?