Hi Martin (and others) The link to Matthew James Taylor’s website was exactly, what I was searching for. Thank you very much.
However, I have a little problem. I have followed his instructions, but my footer is not placed in the bottom of the screen but just below the bottom. Therefore, whether the page has much or little content, I always have a scroll bar. Can’t figure out why it is. Could anyone help me? HTML: <!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"; xml:lang="da" lang="da"> <head> <title>Team Fedberg</title> <link rel="stylesheet" media="screen" type="text/css" href="screen.css"></link> </head><body><div id="container"><div id="title"><p class="title">Team Fedberg</p></div><div id="login_status"><p class="login_status">Du er ikke logget ind - </p></div><div id="menu"><hr/><p class="menu"><a href="http://www.teamfedberg.dk/index.php?pageid=1";>Forside</a></p><hr/></div><div id="content" style="border-width:0px;"><p class="content"><a href="images/oresundsbron2.jpg"><img class="right" src="images/oresundsbron2.jpg" width="300" height="200" alt="teamfedberg.dk" border="0"></a>Team Fedberg er et løbehold, bestående af fortrinsvis KFUM-Spejdere, der alle har sat sig for at gennemføre <a href="http://www.sparta.dk/brolobet/dk/800we.aspx";>Broløbet 2010</a> over Øresund. Løbernes niveau spænder vidt fra de allermest nybegyndende, der er ved at dø, hvis de skal bevæge sig op på en 2. sal, til de mere erfarne, som har prøvet halve og hele maraton før. <br/> Hjemmesiden her vil på sigt være et online mødested for medlemmerne og et værktøj til at planlægge fællestræning og holde modet oppe hos hinanden. Vil du gerne være med på Team Fedberg, så kontakt Emerik Schultz-Petersen, på mail fedberg(a)emerik.dk. </p></div><div id="footer"><p class="footer">teamfedberg.dk - Emerik Schultz-Petersen - tlf. (+45) xx xx xx xx</p></div></div></body></html> CSS (only html, body and divs): html, body { background-color: #4C6260; font-family: Verdana, Tahoma, sans-serif; color: #FFFFFF; height: 100%; margin: 0px; padding: 0px; } #container { position: relative; left: 50px; width: 800px; min-height: 100%; text-align: center; } #title { width: 100%; } #menu { width: 100%; } #login_status { width: 100%; text-align: right; } #content { padding-bottom: 30px; width: 100%; border-style: solid; border-width: 1px; border-color: #FF0000; } #footer { position: absolute; height: 20px; width: 100%; bottom: 0px; text-align: left; } Fra: [email protected] [mailto:[email protected]] På vegne af Martin Sendt: 20. oktober 2009 08:06 Til: [email protected] Emne: [Design with CSS 2615] Re: How to design webpage using div with header, content (with variable size) and footer You should have a look at grid css frameworks like http://960.gs/ or http://wiki.github.com/stubbornella/oocss/grids This will help you to layout your content quickly and nicely. The Yahoo Grid Builder might help you as well: http://developer.yahoo.com/yui/grids/builder/ To keep the footer at the bottom of the page you might have a look at this tutorial: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page Best regards, Martin 2009/10/18 Emerik <[email protected]> Hi, I've been told, that div is the way to design web pages today, instead of tables. I would like to build a website, with a header block and a footer block with fixed sizes, and a content block, whose size varies from page to page. The header should be in top of the screen - this is no problem The content should be just below but since the content varies from page to page, I would like the content block to have a minimum height of (screen_height - header_height - footer_height), but no maximum height. The footer should always be below the content block. On pages with very little content, the footer should be in the bottom of the screen. How do I position my div in order to get the result described? Regards, Emerik --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] -~----------~----~----~----~------~----~------~--~---
