CODEWITHSUNDEEP
htmlcsscss-position
big_tommy_7bb
big_tommy_7bb

Reputation: 1317

Centering a fixed position html element relative to parent container not the browser

I have a fixed div that I want to always be displayed at the bottom of the page. This div needs to be centered within the site, which is 75% width of the browser window. The contents also centered.

I know fixed elements use the browser window for positioning but how do I get it to stay with the width and position of the containing element?

Also, as the fixed element should be relative to the browser window why does it not start from the left margin by default (I know that left: 0 will fix this)?

Here is a js fiddle of my problem: http://jsfiddle.net/ZN7g8/

HTML:

<div id="wrapper">  
<div id="one"></div>
<div id="two"></div>
<div id="three">
  <p>Some text...........</p>
</div>

CSS:

#wrapper { width: 75%; max-width: 800px; height: 100%; margin: 0 auto;}
#one {height: 100px; background-color: red }
#two {height: 100px; background-color: blue }
#three {height: 100px; width: 100%; max-width: 1200px; background-color: green; position: fixed; bottom: 0}
#three p {text-align: center;}

I've seen several other questions hinting at this problem but all seem to be dealing with fixed width sites.

Upvotes: 1

Views: 2898

Answers (1)

user1622998
user1622998

Reputation:

Two things:

  1. You need to use position: absolute on your footer.

  2. You need to specify a position property on your wrapper in order to give it layout.

e.g. http://jsfiddle.net/WzxGA/

#wrapper { width: 75%; max-width: 800px; height: 100%; min-height:500px; margin: 0 auto; position:relative;}
#one {height: 100px; background-color: red }
#two {height: 100px; background-color: blue }
#three {height: 100px; width: 100%; max-width: 1200px; background-color: green; position: absolute; bottom: 0}
#three p {text-align: center;}

Upvotes: 1

Related Questions