Ik wil zoiets graag gebruiken, maar heb er toch een probleem mee: Als ik in de div wrapper andere divs wil positioneren, houden die de footer niet tegen als je de browser window kleiner maakt.
Ik denk dat je voor je divs niet te snel een position: absolute moet gebruiken. In het voorbeeld op mijn site doe ik dat geloof ik alleen voor de footer. De rest gaat met floats. Je bent vrij om de code van mijn site te gebruiken voor je eigen doeleinden.
edit: ik ben even een paar uur op pad, maar zal straks het topic nog even checken.
Hoi Newbie nee bedankt, dit is niet wat ik bedoel. Je gebruikt een overflow:auto, wat een beetje het effect van een frame geeft, met een extra scrollbar.
Ik probeer een variatie te maken, met als verschil: pagina is gecentered (dat werkt), en bevat een meer complex content gedeelte. In het content gedeelte wil ik gewoon div's kunnen plaatsen zoals ik dat gewend ben. Hier is mijn poging te zien: http://test.sandervangelderen.nl/test.html
Het is de bedoeling dat als je het venster gaat verkleinen, de footer op goed moment tegen de onderkant van het content gedeelte aankomt en daar blijft. In mijn voorbeeld zou hij dus tegen de linker kolom aan moten komen.
Ik moet nu weg, pak deze topic zeker weer op morgen.
Ik heb aan de hand van de css op de site van jan het onderstaande gemaakt, ik denk dat dit ongeveer is wat je nodig hebt, ik krijg alleen de 'links' en 'rechts' niet zo hoog als de pagina, maar ik verwacht dat iemand dat wel op kan lossen.
Groet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PHPhulp CSS tut deel 4 - voorbeeld 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background-color:#999999;
}
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;
}
#header {
height: 64px;
min-width: 700px;
background-color:#333333;
color:#FFFFFF;
}
#rechts {
float: right;
width: 200px;
background-color:#666666;
margin: 10px;
}
#links {
float: left;
width: 200px;
background-color:#666666;
margin: 10px;
}
#content {
margin-left: 220px;
margin-right: 220px;
border: 0px;
background-color:#999999;
}
#footer {
position: absolute;
bottom: 0;
background-color: #333333;
width: 100%;
text-align: center;
}
div.content_wrapper {
padding: 9px;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="header">
<h1>header</h1>
</div>
<div id="rechts">
<div class="content_wrapper">
<h2>Rechts</h2>
<ul class="menu">
Rechts
</ul>
</div>
</div>
<div id="links">
<div class="content_wrapper">
<h2>Links</h2>
<ul class="menu">
Links
</ul>
</div>
</div>
<div id="content">
<div class="content_wrapper">
<p>
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
</p>
</div>
</div>
</div>
<div id="footer">
<p>U kunt deze pagina het best bekijken in alle browsers op elke schermgrootte :-)</p>
</div>
</div>
</body>
</html>
