CODEWITHSUNDEEP
htmlcss
Rohitink
Rohitink

Reputation: 1174

Show footer fixed at bottom right, Deafult is left (CSS/HTML5)

I am Trying to Place My Footer in the bottom Right of the page. I am using the HTML5's <footer> tags.

So, here is what i have in my CSS:

footer {
    position:absolute;
    bottom: 0px;
    float: right;
    height: 35px;
    margin: 0px 50px 0px 0px;
    background: #9FF;
    color: #000;
    text-align: right;
    padding: 10px 30px;
}

With this code the footer perfectly sticks to the bottom. What i want is that it should also be in the rightmost part of the footer as well.

http://i47.tinypic.com/2rrox0w.png

So, when i use the following code: right: 50px in the CSS. Then the footer gets positioned relative to the browser. So, whenever i Resize my browser the footer is dislocated.

What i Want ?

I want to footer to be placed at the bottom. And at a a margin of 50px(right) from the container(#main or #maincontent) it is placed in rather than the browser. The float: right does not seem to work.

I have looked the whole internet and stackoverflow as well. But, could not find a solution to this kind of issue.

I am using Google Chrome 22. So, My Browser is largely HTML5 compatible.

Upvotes: 2

Views: 20648

Answers (4)

Mr. Alien
Mr. Alien

Reputation: 157334

Updated: you don't need to position it absolute, just remove the position, give some width to your footer and float it towards right like this

footer {
    float: right;
    height: 35px;
    margin: 0px 50px 0px 0px;
    background: #9FF;
    color: #000;
    text-align: right;
    padding: 10px 30px;
    width: 180px;
}

My New Fiddle

Upvotes: 2

Derik
Derik

Reputation: 843

You need to create a centralized container to the footer with the same with that #main or #maincontent. And then use the margin inside that footer container.

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

Remove float and give right:50px (or your desired value) to it. if it still doesnt work then give clear:both;and also check your padding and margin values.

Upvotes: 0

BenM
BenM

Reputation: 53208

Add position: relative to the container, and then use the right property.

So your full CSS would look something like this:

#main,
#maincontent {
    position: relative;
}

footer {
    position: absolute;
    bottom: 0px;
    right: 50px;
    height: 35px;
    margin: 0px 50px 0px 0px;
    background: #9FF;
    color: #000;
    text-align: right;
    padding: 10px 30px;
}

Upvotes: 0

Related Questions