css position question

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • acctman
    Confirmed User
    • Oct 2003
    • 2840

    #1

    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
    I make pixels work
    • Jun 2005
    • 24386

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

    Comment

    • Babaganoosh
      ♥♥♥ Likes Hugs ♥♥♥
      • Nov 2001
      • 15841

      #3
      Originally posted by Deej
      wrap it up. drop the absolute. margin it correctly.
      That sounds like lyrics to a song.
      I like pie.

      Comment

      • harvey
        Confirmed User
        • Jul 2001
        • 9266

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

        Comment

        • acctman
          Confirmed User
          • Oct 2003
          • 2840

          #5
          thanks harvey, that worked perfectly

          Comment

          • acctman
            Confirmed User
            • Oct 2003
            • 2840

            #6
            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?

            Comment

            • harvey
              Confirmed User
              • Jul 2001
              • 9266

              #7
              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;
              
              }
              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

              Comment

              • grumpy
                Too lazy to set a custom title
                • Jan 2002
                • 9870

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

                Comment

                • Deej
                  I make pixels work
                  • Jun 2005
                  • 24386

                  #9
                  Harvey is a mad machine!

                  Deej's Designs n' What Not
                  Hit me up for Design, CSS & Photo Retouching


                  Icq#30096880

                  Comment

                  • acctman
                    Confirmed User
                    • Oct 2003
                    • 2840

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

                    Comment

                    • harvey
                      Confirmed User
                      • Jul 2001
                      • 9266

                      #11
                      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)
                      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

                      Comment

                      Working...