css position question - GoFuckYourself.com

acctman · 09-27-2011, 11:07 AM

how can I prevent the main_wrapper from overlapping the footer? the footer has to maintain and position: absolute so that it stays flushed at the bottom of the browser.

Code:

#page_contain {
    min-height: 100%;
    position: relative;
}

#main_wrapper {
    width: 950px;
    height: 800px;
    margin: 0 auto 25px auto;
    position: relative;
    border: 1px solid #000;
}

#footer {
    position:absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align: center;
    font-family: Verdana;
}

html

Code:

<div id="page_contain"></div>
<div id="main_wrapper"></div>
<div id="footer">
line 1 <br />
line 2 <br />
line 2 <br />
line 2 <br />
line 2 <br />
line 2 <br />
</div>

Deej · 09-27-2011, 11:14 AM

wrap it up. drop the absolute. margin it correctly.

Babaganoosh · 09-27-2011, 11:16 AM

Quote:

Originally Posted by Deej

wrap it up. drop the absolute. margin it correctly.

That sounds like lyrics to a song.

harvey · 09-27-2011, 11:26 AM

Code:

#main_wrapper {
    width: 950px;
    height: 800px;
    margin: 0 auto 25px;
    position: relative;
    border: 1px solid #000;
}

#footer {
    position:relative;
    bottom: -10px; margin-bottom:10px; /*cross-browser compatibility */
    width: 100%;
    height: auto;
    text-align: center;
    font-family: Verdana;
clear:both;
}

acctman · 09-27-2011, 11:48 AM

thanks harvey, that worked perfectly

acctman · 09-27-2011, 12:04 PM

questions, i've noticed if main_wrapper height is set to 100% the footer no longer stays on the bottom. so in order for the code above to work it has to maintain a fixed height?

harvey · 09-27-2011, 12:20 PM

Quote:

Originally Posted by acctman

questions, i've noticed if main_wrapper height is set to 100% the footer no longer stays on the bottom. so in order for the code above to work it has to maintain a fixed height?

ah, no, I got what yo want to do now, the code is different:

Code:

#main_wrapper {
    width: 950px;
height:auto;
min-height:800px; /*adjust as needed or simply delete */
    margin: 0 auto 25px;
    position: relative;
    border: 1px solid #000;
}

#footer {
    position:absolute;
    bottom: 0px;
    width: 100%;
    height: auto;
    text-align: center;
    font-family: Verdana;
clear:both;

}

grumpy · 09-27-2011, 12:21 PM

http://ryanfait.com/resources/footer...ottom-of-page/

Deej · 09-27-2011, 12:44 PM

Harvey is a mad machine!

acctman · 09-27-2011, 12:52 PM

Quote:

Originally Posted by grumpy

http://ryanfait.com/resources/footer...ottom-of-page/

I tried that one out when coding my main page worked fine, but did not work will with my inside pages.

thanks harvey everything is working now

harvey · 09-27-2011, 01:34 PM

Quote:

Originally Posted by Deej

Harvey is a mad machine!

ha ha, you're using the lame anim I made young grasshopper! On a side note, I sent someone your way regarding some work a few days ago, did he contact you?

Quote:

Originally Posted by acctman

I tried that one out when coding my main page worked fine, but did not work will with my inside pages.

thanks harvey everything is working now

that's because that solution is pretty lame and flaky. And added to that there's a horrible misconception that everything OUTSIDE GFY is better, and "mainstream" designers/coders are better (????) when most of the times that premise is wrong (or the extremely good ones are beyond anyone's pockets, so it's the same result)

09-27-2011, 11:14 AM	#2
Deej I make pixels work Industry Role: Join Date: Jun 2005 Location: I live here... Posts: 24,386	wrap it up. drop the absolute. margin it correctly. __________________ Deej's Designs n' What Not Hit me up for Design, CSS & Photo Retouching Icq#30096880

09-27-2011, 11:26 AM	#4
harvey Confirmed User Industry Role: Join Date: Jul 2001 Location: 127.0.0.1 Posts: 9,266	Code: #main_wrapper { width: 950px; height: 800px; margin: 0 auto 25px; position: relative; border: 1px solid #000; } #footer { position:relative; bottom: -10px; margin-bottom:10px; /cross-browser compatibility / width: 100%; height: auto; text-align: center; font-family: Verdana; clear:both; } __________________ This post is endorsed by CIA, KGB, MI6, the Mafia, Illuminati, Kim Jong Il, Worldwide Ninjas Association, Klingon Empire and lolcats. Don't mess around with it, just accept it and embrace the truth

09-27-2011, 12:21 PM	#8
grumpy Too lazy to set a custom title Join Date: Jan 2002 Location: Holland Posts: 9,870	http://ryanfait.com/resources/footer...ottom-of-page/ __________________ Don't let greediness blur your vision \| You gotta let some shit slide icq - 441-456-888

09-27-2011, 12:44 PM	#9
Deej I make pixels work Industry Role: Join Date: Jun 2005 Location: I live here... Posts: 24,386	Harvey is a mad machine! __________________ Deej's Designs n' What Not Hit me up for Design, CSS & Photo Retouching Icq#30096880

09-27-2011, 11:48 AM	#5
acctman Confirmed User Join Date: Oct 2003 Location: Atlanta Posts: 2,840	thanks harvey, that worked perfectly

09-27-2011, 12:04 PM	#6
acctman Confirmed User Join Date: Oct 2003 Location: Atlanta Posts: 2,840	questions, i've noticed if main_wrapper height is set to 100% the footer no longer stays on the bottom. so in order for the code above to work it has to maintain a fixed height?