<div id="header">
<div>
Home Agenda Foto's Media Bandleden Gastenboek
</div>
<img src="static/img/mv.png" id="mv" alt="Mathijs Vos" />
</div>
<div id="container">
<div id="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a tempor nunc. Mauris luctus tempor turpis id adipiscing. Quisque sit amet vestibulum metus. Mauris ut arcu urna, vel porta ante. Aenean odio erat, porttitor sit amet tempor vel, pellentesque id elit. Praesent bibendum, risus sit amet adipiscing dictum, neque lorem ultricies magna, et commodo ligula mauris at nisi. Proin elit ante, rutrum eu dictum non, euismod non metus. Pellentesque imperdiet turpis lorem, nec mattis elit. Donec ultrices turpis ac risus consequat iaculis condimentum ligula aliquam. Nunc tincidunt blandit ultricies. Aliquam sit amet vehicula ligula. Cras sagittis bibendum condimentum. Aliquam dapibus mi dui, luctus gravida diam. Cras hendrerit purus orci, sit amet iaculis tortor.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mauris arcu, feugiat et elementum eu, tristique vitae magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac eros felis, dictum scelerisque est. Fusce orci lectus, suscipit ac mollis sed, congue vel libero. Pellentesque ut quam tortor. Maecenas eu velit in elit egestas varius. Suspendisse vestibulum interdum accumsan. Quisque ullamcorper lobortis felis, at viverra enim aliquet in. Phasellus vehicula aliquet nisl, sit amet volutpat lacus commodo sit amet. Praesent condimentum viverra vehicula. Proin rutrum, metus non hendrerit gravida, dolor nunc aliquet nunc, vel dapibus sapien felis ac velit. Nunc nec dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur volutpat placerat semper.
Nam gravida, ipsum ac interdum convallis, odio diam tincidunt turpis, vitae tristique eros mi a neque. Donec quis nulla nunc. Praesent vel nulla id nunc viverra fringilla sed venenatis eros. Nulla in eros purus, ac mollis sapien. Aliquam nec est a ligula tincidunt ultricies ut id diam. Suspendisse volutpat tincidunt imperdiet. Curabitur euismod, odio eu sodales varius, turpis erat elementum mauris, eu tempor mi tellus nec lorem. Vestibulum facilisis nibh sit amet arcu ultrices eu blandit ante aliquam. Aliquam dictum, lacus a consectetur facilisis, nibh lorem adipiscing ligula, id pretium leo lacus ac tellus. Quisque et sem mauris, vitae sollicitudin erat. Nunc volutpat tincidunt felis in laoreet. In non justo est, a euismod orci. Vestibulum vitae libero justo, ut aliquet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam lobortis lectus sed nisl semper facilisis. Aliquam vel mi et lectus malesuada blandit. Mauris ac lorem orci, eu dapibus diam. Nam nec elit sed urna dapibus commodo. Donec at justo mi. Duis auctor congue scelerisque.
Sed vulputate purus eget lacus luctus sit amet pretium turpis tincidunt. Sed vel nunc nunc. Vivamus pellentesque varius nisl consequat dapibus. Aliquam metus arcu, interdum id egestas ut, adipiscing ac sem. Vestibulum dignissim dapibus aliquet. Quisque ac diam at ante imperdiet consequat. Cras ac augue justo, in hendrerit metus. Curabitur at egestas lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras metus enim, dictum quis malesuada eget, vestibulum quis orci. Nullam justo metus, blandit ac hendrerit a, accumsan sit amet leo. Maecenas eget felis at risus lobortis dapibus varius condimentum mauris. Donec ligula nisi, tempor quis pharetra ut, auctor vel diam. Phasellus sapien ligula, dignissim ut feugiat in, egestas aliquet diam. Cras ultricies, tortor vel luctus tristique, dui ipsum malesuada libero, et scelerisque lorem justo et augue.
Integer tristique aliquam leo, luctus sollicitudin mauris fermentum molestie. Nulla facilisi. Morbi nec ante urna, ut dapibus nulla. Nullam venenatis laoreet neque, bibendum bibendum ligula mattis vel. Duis non turpis vel risus gravida fermentum dictum sed justo. Nam vehicula feugiat massa, vel rutrum mi auctor eget. Aliquam porta egestas aliquam. Duis commodo, dolor non ornare tincidunt, magna justo semper enim, sed vestibulum ipsum sapien non dui. Donec iaculis, nulla vel interdum mollis, leo eros aliquam purus, a elementum sem sem ut orci. Aliquam metus nunc, gravida quis pellentesque nec, venenatis vel ligula. Mauris rutrum dui vel nisl consequat tempus. Pellentesque eget augue nibh. Sed suscipit varius vulputate. Praesent gravida hendrerit dui et cursus.</div>
</div>
<div id="rightblock">
<div id="photos">
</div>
</div>
<div id="filler"></div>
</div>
<div id="footer">
<div id="footercontainer">
<div id="bottomblock">
<span class="fat">Agenda</span>
<div id="diary">
</div>
» Meer info...
</div>
<div id="logoblock">
<img src="static/img/logo_part1.png" id="logo1" alt="Fienut" />
<img src="static/img/logo_part2.jpg" id="logo2" alt="Fienut" />
</div>
</div>
<div style="clear: both"></div>
</div>
Het is de bedoeling dat #header en #footer een vaste hoogte krijgen. Dat hebben ze ook. Nu is het echter de bedoeling dat hierdoor #container de rest van de ruimte opvult en dus kleiner is op een klein scherm.
Nu is het probleem dat #container altijd even groot blijft en de inhoud hiervan dus dwars door de footer heen gaat.
Hoe krijg ik dit voor mekaar?
Stukje (relevante) css:
@CHARSET "ISO-8859-1";
body
{
background-color: #000000;
margin: 0px;
font-family: arial;
font-size: 10pt;
color: #FFFFFF;
max-height: 100%;
}
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#header
{
background: url(../img/header_tile.png) repeat-x bottom;
width: 100%;
height: 50px;
font-family: "Arial black";
color: #FF6600;
font-size: 16pt;
}
#footer
{
position: absolute;
bottom: 0px;
border-bottom: 1px solid gray;
background: url(../img/footer_tile.png) repeat-x bottom;
width: 100%;
height: 243px;
}
#footercontainer
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#content
{
background: url(../img/centerblock.png) no-repeat bottom;
width: 740px;
float: left;
overflow: auto;
max-height: 450px;
height: 10%;
}
#rightblock
{
background: url(../img/rightblock.png) no-repeat bottom;
width: 234px;
float: right;
border-right: 1px solid #2A2A2A;
}
#photos
{
width: 190px;
max-height: 364px;
padding-bottom: 10px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#filler
{
clear: both;
}
#bottomblock
{
position: relative;
top: 10px;
background: url(../img/bottomblock.png) no-repeat;
width: 437px;
height: 148px;
float: left;
padding: 5px;
}
#logoblock
{
float: right;
width: 541px;
vertical-align: top;
}
