ignace Posted March 12, 2009 Share Posted March 12, 2009 Hello i am experimenting with the content first thingy so first comes my title then the main content, then the navigation, etc... Then using absolute positioning i place it where it should go. However the problem with this is that when i have to much content it runs through my footer, and when i scroll down the footer remains at what used to be my screen bottom. What i want to do is that my wrapper automatically stretches so that my content is always within a container. Thanks in advance, Ignace Knops index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl" dir="ltr"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>Historie :: Monoposto Racing Series</title> <link rel="stylesheet" media="screen, projection" type="text/css" href="../styles/screen.css" /> </head> <body> <div id="wrapper"> <a name="top"></a> <div id="branding"><h1>Monoposto Racing Series</h1></div> <div id="content"> <h2>A story re-told</h2> <p>Lorem ipsum dolor sit amet</p> </div> <div id="sidebar"> <ul class="list"> <li class="item"><a class="link current" href="index.html">Hoofdpagina</a></li> <li class="item branch"><a class="link" href="info.html">Info</a></li> <li class="item"><a class="link" href="calendar.html">Kalender</a></li> <li class="item"><a class="link" href="pictures.html">Afbeeldingen</a></li> <li class="item"><a class="link" href="results.html">Resultaten</a></li> <li class="item"><a class="link" href="contact.html">Contact</a></li> </ul> </div> <ul id="copyright"> <li class="item"><a class="link" href="copyright.html">© 2009 Monoposto Racing Series. All Rights Reserved.</a></li> </ul> </div> </body> </html> screen.css @import url(reset.css); html, body { height: 100% } body { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 100%; text-align: center; color: #444; background: #BDBDBD url(../images/assets/bg.jpg) repeat-x fixed } .hidden { display: none } .back-to-top { font-size: .8em; text-align: right } #wrapper { width: 48.75em; /* 780px / 16px = 48.75em */ margin: 0 auto; text-align: left; position: relative; height: 100%; background: #FFF; border-left: 0.3125em solid #222; border-right: 0.3125em solid #222 /* 5px / 16px = 0.3125em */ } #branding { position: absolute; width: 48.75em; /* 780px / 16px = 48.75em */ height: 7.3125em; /* 117px / 16px = 7.3125em */ background: url(../images/assets/banner.jpg) no-repeat; border-bottom: 0.3125em solid #222 } #branding h1 { display: none; font-size: 1.5em; /* 24px / 16px = 1.5em */ } #content { position: absolute; top: 9.375em; /* 150px / 16px = 9.375em */ left: 18.28125em; /* (780px - (780px / 1.6)) / 16px = 18.28125em */ text-align: justify; width: 30.46875em /* ((780px / 1.6) / 16px) - 20px = 29.em */ } #content #gallery { } #content #gallery .title { font-weight: bold } #content #gallery .item { display: inline } #content #gallery .item .image { } #content #gallery .item .caption { } #content h2 { font-size: 1.125em; margin-bottom: 20px } /* 18px / 16px = 1.125em */ #content h3 { font-size: 1.6em; margin-bottom: 20px } /* */ #content h4 { font-weight: bold; margin-bottom: 20px } #content ul { margin: 20px 0 20px 40px; display: list-item; list-style-type: square; font-size: 0.875em /* 14px / 16px = 0.875em */ } #content ul li { } #content p { margin-bottom: 1.25em } #content table { width: 100% } #content table tr { } #content table tr th { font-weight: bold; text-align: center; border-bottom: 1px solid #222 } #content table tr td { } #sidebar { position: absolute; top: 140px; left: 0px; width: 18.28125em; /* (780px - (780px / 1.6)) / 16px = 18.28125em */ } #sidebar .list { background: #E8E8E8; padding: 1.25em; margin: 1.25em /* 20px / 16px = 1.25em */ } #sidebar .list .item { background: url(../images/famfamfam/bullet_black.png) no-repeat; padding-bottom: .5em; /* 8px / 16px = 0.5em */ padding-left: 1.25em } #sidebar .list .branch { background-image: url(../images/famfamfam/bullet_toggle_plus.png) } #sidebar .list .item .current { font-weight: bold; text-decoration: none } #sidebar .list .item .link { color: #222568; text-decoration: underline } #sidebar .list .item .link:hover { text-decoration: none } #sidebar .list .item .sublist { padding-top: 10px } #sidebar .list .item .sublist .subitem { font-size: .8em; padding-bottom: 8px } #sidebar .list .item .sublist .subitem .link { color: #696cad; text-decoration: none } #sidebar .list .item .sublist .subitem .link:hover { text-decoration: underline } #sidebar .list .item:hover .sublist { } #sidebar .list .item:hover .sublist .subitem { } #sidebar .list .item:hover .sublist .subitem .link { } #copyright { position: absolute; bottom: 0px; height: 30px; text-align: center; width: 100%; font-size: .7em; background: #222; padding-top: 5px } #copyright .item { display: inline; padding-right: 10px } #copyright .item .link { color: #888; text-decoration: none } #copyright .item .link:hover { text-decoration: underline } Quote Link to comment Share on other sites More sharing options...
POG1 Posted March 12, 2009 Share Posted March 12, 2009 Have you tried floating the divs as apposed to absolute positioning? Quote Link to comment Share on other sites More sharing options...
ignace Posted March 13, 2009 Author Share Posted March 13, 2009 No i didn't try to float them, but are you suggesting that this is my only option? Quote Link to comment Share on other sites More sharing options...
POG1 Posted March 13, 2009 Share Posted March 13, 2009 It will probably be easier. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 13, 2009 Share Posted March 13, 2009 Absolute positioning is not "flexible" and should never be considered for the wire-frame page layout. Using floats is by no means your "only" option ... it is, however, the absolute best option. You are doing the right thing by using "semantic" markup. It will be a rough transition at first, but once you get comfortable and go through the trials and tribulations of learning the css tricks, you life will be so much easier. And your site will naturally begin doing much better in search engines once the bots can spider and index your site easily (NEVER ANNOY THE BOTS WITH TAG SOUP!) Don't ignore the <title> and description meta tags and make sure they are never duplicated in another page (if using php, toss a variable in the title that will make it unique for each generated page). Quote Link to comment Share on other sites More sharing options...
POG1 Posted March 15, 2009 Share Posted March 15, 2009 Have you got it working? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.