Centering with fixed position

[bassdog65]

Ok, so I'm still fairly new to CSS, but I have a good grasp.

 

I have a page with a footer with a fixed position on the bottom of the window, and what I want is for something to sit on top of the footer, fixed as well, but to also be centered.  I cant figure out how to center something, and also have it fixed at the bottom.  It appears that these two things contradict.

 

I can post code examples if need be, but in all reality I just need a concept, because I am clearly missing what I am trying to accomplish.  If someone could point me in the right direction, it would be appreciated.

[Yeodan]

check my post, it's two posts below yours named "div container wrong height"

 

it has my .css in it, wich centers the page

hope it helps

[Ken2k7]

Depends what you're centering. If it's text in a DIV, it depends on the width of the DIV. I need more information. What are you centering?

[TheFilmGod]

I'll model the css exactly the way your phrased your question:

 

<div id="footer">

  <div class="main">

      <div class="center_me">The thing you want centered</div>

      ... main footer contents

  </div>

</div>

 

CSS:

 

#footer {

position: fixed;

width: __px;

margin: 0 auto;

bottom: 0;

}

#footer .main {

position: relative;

}

#footer .main center_me {

margin: -10px auto 0;

position: absolute;

width: ___px;

}

 

This is complicated as you see. First you make the footer fixed so it will "stick" to the bottom at all times. Next, you create a wrapper (.main) which uses position: relative; To center something on top of the footer just center it using margin: x auto; next we append position absolute to stick it out of the flow of the content and put it on top of your footer with a negative top margin - margin: -10px auto 0; (final margin declaration).

 

Hope it works. I haven't tried it out, but it should work.

[bassdog65]

Yeah, ironically, thats is about what I had done before I posted on here, and for some reason I keep gettong one of two results.  Either it is stuck to the top of the footer but left aligned with the page, or neither centered nor stuck to the top of the footer.  I had almost that exact same code verbatim in one of my attempts at doing what I'm doing.  Just for kicks, I replaced all of mine with yours and set the sizes and yours results in the "thing you want centered" still being left aligned inside the footer....pretty much the same thing I have been running into.  To clarify what I need done, I have a footer in a DIV that is 100% width of the page, and fixed with a bottom:0 and left:0 position, so it sticks to the bottom and spans the width, that part is easy, and I have something else that I want to sit directly on top of that footer, and also be fixed to the bottom, rather than relative to the content of the page.  If the second item is set to 100% width, I can set a negative margin, or bottom-padding and make it sit nicely right on top, but when i try to set it to a fixed width, instead of 100%, it never centered, no matter what I try.  I hope that clarifies more.  Like I said, I could post code, but I don't really haev specific code that isn't working, I am trying 100 different thigns trying to accomplish my goal.

[Ken2k7]

Is the text not centered or the DIV? If text, add a text-align: center; If it's the DIV, which one is it?

[bassdog65]

its teh DIV itself that wont center.  centering within the DIV is simple.

[TheFilmGod]

Post a link. I'll try helping you out.

 

Do you want that "thing to be centered" to sit on top of the footer or directly at the bottom?

[bassdog65]

I kind of abandoned my effort.  I think that I am just going to go about my design a different way.  My original need to have the footer stick the to bottom has changed, so I think I'll just leave this one unsolved until it comes up again.  I appreciate all the help and the ideas from everyone!

[Ken2k7]

Look at it this way - if you abandon it, you wasted our time. So it's best not to.