kralspace Posted November 29, 2007 Share Posted November 29, 2007 This has got to be a simple, dumb mistake on my part...but I'm pulling my hair out. I've stripped my code down to the bare necessities to try and find out why I can not get my footer to display on my page just below my content. It wants to display up and behind my content right now if you look at it in Firefox: http://cord.org/ncnet-new/post.php here is my style sheet: (post.css) body { font-weight:normal; font-size:10pt; font-family: arial, verdana, sans-serif; background-color: #F9E37B; text-align: center; } #container { margin: 0px auto; width: 800px; text-align: left; border: 2px solid #000000; background-color: #FDF3BE; background-image: url(../images/banner-swoopy.gif); background-repeat: no-repeat; background-position: left top; z-index:-1; } #contentbox { position: relative; top:185px; width: 625px; margin-left: 165px; padding-top:3px; text-align: left; background-image: url(../images/content-top.gif); background-repeat: no-repeat; background-position: left top; background-color: #ffffff; z-index:10; } #contentbox2 { height: 14px; background-image: url(../images/content-bottom.gif); background-repeat: no-repeat; background-position: left bottom; background-color: #ffffff; z-index:11; } #footer { position:relative; top: 0px; width: 400px; margin-left: 200px; margin-top: 10px; margin-bottom: 10px; padding: 1px 0 2px 75px; font-size: 10px; color: #6a6a6a; background-color: transparent; background-image: url(../images/NCCCS_logo_butter.gif); background-repeat: no-repeat; background-position: left top; } and here is my php page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>NC-NET Sociology Resources</title> <link href="css/post.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="contentbox"> <h1>Sociology Resources </h1> <p><strong>Sociological Research Online</strong> — Publishes high quality applied sociology, focusing on theoretical, empirical and methodological discussions which engage with current political and intellectual topics and debates. </p> <div id="contentbox2"> </div><!-- close contentbox2 div --> </div><!-- close content box div --> <div id="footer"> <p>Copyright 2007 North Carolina Community College System<BR> 200 West Jones Street, Raleigh, NC 27603</p> </div><!-- end of footer --> </div><!-- end of container --> </body> </html> I have changed this at least 50 ways (all wrong obviously..lol) and had that footer going everywhere except following under the contentbox div. I'd appreciate anyone who has a minute to take a look at it, thanks, Kathy Quote Link to comment https://forums.phpfreaks.com/topic/79442-solved-footer-and-content-not-in-order/ Share on other sites More sharing options...
sKunKbad Posted November 29, 2007 Share Posted November 29, 2007 relative positioning doesn't use position: relative; and top:185px; take out the top:185; and replace with float:left; you also need to declare a float:left on the footer, and take out its top declaration. Learning how to float stuff is one of the trickier things about CSS. Your top declarations work with absolute positioning, but have no use in relative positioning. Quote Link to comment https://forums.phpfreaks.com/topic/79442-solved-footer-and-content-not-in-order/#findComment-402367 Share on other sites More sharing options...
kralspace Posted November 29, 2007 Author Share Posted November 29, 2007 skunkbad, I did what you suggested and it's working now! I also used the margin-top to scoot the contentbox down below the masthead and all is well with the world now, Thank you so much. I've just started trying to use 'float' and it has been an experience I have to say. I'm very glad to have found this forum and appreciate your time and trouble! Kathy Quote Link to comment https://forums.phpfreaks.com/topic/79442-solved-footer-and-content-not-in-order/#findComment-402381 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.