css position question

[acctman]

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.

#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

<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]

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

[Babaganoosh]

Originally Posted by Deej

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

That sounds like lyrics to a song.

[harvey]

#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]

thanks harvey, that worked perfectly

[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?

[harvey]

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:

#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]

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

[Deej]

Harvey is a mad machine!

[acctman]

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]

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?

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)