CSS: fixed size div, fixed vertical position and centered horizontally?

Question

CSS: is it possible to have a DIV that is both centered horizontally and fixed to the bottom of the browser? I'm using a set width and height for the internal div.

I've tried putting a div with position:relative inside a fixed outer div, and that aligns things vertically but then the outer div is not centered and I'm back to square one.

Is this even possible to do using just CSS? I'm using JQuery as well, so i would use that if its the only way, but i'd rather do it with CSS if its possible.

Thanks, dylan

Answer 1

Figured it out.

HTML

<div id="background">
    <div id="content">
    </div>
</div>

div#background{
    height: 800px;
    width: 100%;
    position: fixed;
    bottom: 0;
}

div#content{
    position: relative;
    margin: 0 auto;
    bottom:0;
    height: 700px;
    width: 800px;
}

Setting the div#background width to 100% still allows the div#content to use margin:auto while still dynamically adjusting to the window width.

Answer 2

As div#content is fixed width, you might be able to do away with div#background:

div#content{
    position: fixed;
    width: 800px;
    height: 700px;
    bottom: 0;
    left: 50%;
    margin-left: -350px;
}

Of course, if you want a 100%-width background in there, you might as well stick with your method.