Mijn layout is gemaakt met css, header, inhoud en footer.

Voor de footer ziet de css er zo uit:


#footer {
	position: static;
	left: 0px;


Als je nu een pagina met weinig inhoud hebt dan gaat de footer omhoog. Hij blijft niet netjes onder in beeld zitten.
Hoe moet ik dit instellen?

Kijk voor voorbeeld
@Kalle

Moet ik de container zo instellen of de footer?
de container, kortom dus. Alles in die div.
@robert

Deze werkt!
Ik heb ze allebei op 90% gezet anders moet je scrollen om de footer te kunnen zien.

Bedankt.
Wat me nu nog opvalt is dat in FF de tabel in het midden naar rechts gaat staan. Dit staat goed in de code met een align="center". In IE staat hij wel netjes in het midden. Nog een oplossing hiervoor?
en als je in de div waar de tabel staat een tekst-align:center; maakt?
Een footer die onderaan kleeft kun je op mijn homepage zien. De CSS kun je gewoon kopieren.

Getest en werkt in IE, FF, Opera en Safari.
@Jan

Ik heb jou css cursussen hier gevolgd en zojuist je css doorgenomen op je pagina. Het lukt mij niet!

De footer zit nu bij het scrollen midden in de pagina en de inhoud zie je erdoor heer komen. Ik heb hem weer even op static gezet anders ziet dat er zo vreemd uit. Moet nu namelijk weg.

Hier is mijn code:


* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
	width: 100%;
}
#header {
	height: 156px;
	min-width: 750px;
}
#menuLinks {
	float: left;
	width: 150px;
	text-align: left;
	border-right: 1px dotted #999999;
	height: 90%;
}
#inhoud {
	margin: 0px 156px 0px 10px;
	border: 0px;
	height: 100%;
	width: 100%;
}
#footer {
	bottom: 0px;
	width: 100%;
	text-align: center;
	left: 0px;
	position: relative;
}
#menuRechts {
	width: 150px;
	float: right;
	text-align: left;
	border-left: 1px dotted #CCCCCC;
	height: 90%;
}

#container {
	position: relative;
	min-height: 100%;
	height: 100%;
	height: auto;
}
Kan iemand nog even kijken?

Ik heb met de footer al vanalles geprobeerd maar hij kruipt steeds omhoog als je bv in het menu op banners klikt omdat daar maar heel weinig op die pagina staat. En een stuk verdwijnt rechts uit beeld.

Ik heb de cursus van Jan gevolgd en ook op zijn pagina gekeken maar bij mij werkt het gewoon niet. Ik snap het niet meer.

Hopelijk zien jullie het......
Ik denk dat je probleem is dat je de inhoud div op 100% hebt staan. Alles wat in totaal (dus de TOTALE height) meer is dan die 100% valt buiten de pagina..
Voor mijn oplossing moet je minstens deze CSS opgenomen hebben en ik zie bij jou maar een deel daarvan staan:

html, body {
	height: 100%;
}

#container {
	position: relative;
	min-height: 100%;
	height: 100%;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: auto;
}

html>body #container {
	height: auto;
}

#wrapper {
	padding-bottom: 24px;
}

Reageren