GoFuckYourself.com - Adult Webmaster Forum

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - css position question (https://gfy.com/showthread.php?t=1039615)

acctman

09-27-2011 11:07 AM

css position question

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 (Post 18455055)

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 (Post 18455162)

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 (Post 18455193)

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 (Post 18455242)

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 (Post 18455252)

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)

All times are GMT -7. The time now is 07:14 AM.