How to get attributes from both relative and absolute positioning
- by user3677286
I have a footer that i want to attach to the bottom of the page using bottom:0px. However, I also want to center it by using margin-left:auto; and margin-right:auto;. Effectively, this will stick the footer to the bottom of the page while keeping it centered vertically.
Unfortunately, these cannot be used together as bottom:0px requires position:relative while margin-left:auto and margin-right:auto require position:absolute.
How can I get both of these attributes onto the same div without creating a container?
If not possible, what is a clean way of getting both these attributes?
ALSO: I do NOT want to have a fixed position.
footer.css:
.footer
{
/*background-color:blue;*/
min-height:10px;
width:940px;
margin-top:5px;
margin-left:auto; /* WILL ONLY WORK IF POSITION IS RELATIVE */
margin-right:auto;
padding:5px;
display:block;
border-top: 3px solid #CCCCCC;
text-align: center;
font-family:arial;
color:gray;
position: relative;
bottom:0px; /* WILL ONLY WORK IF POSITION IS ABSOLUTE */
}
Thanks.
