CODEWITHSUNDEEP
css
user1037763
user1037763

Reputation: 131

Fixed footer with right margin

Can someone explain me why the first code does result in a fixed footer with a small margin on the right as I used an extra 'div' but that without this as seen in the second code it doesn't show a margin on the right? Thanks!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            width: 100%;
            margin: 0px auto;
        }
        .mymargin {
            clear: both;
            position: fixed;
            bottom: 0px;
            text-align: right;
            width: 100%;
            background-color: fuchsia;
        }
        footer {
            margin-right: 20px;
        }
    </style>
</head>
<body>
Look in the right corner below!
    <div class="mymargin">
        <footer>
            <a href="abababab">fixedfooterwithmargin-ontheright</a>
        </footer>           
    </div>
</body>
</html>

Second code without an extra div.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            width: 100%;
            margin: 0px auto;
        }
        footer {
            clear: both;
            position: fixed;
            bottom: 0px;
            text-align: right;
            width: 100%;
            background-color: fuchsia;
            margin-right: 20px;
        }
    </style>
</head>
<body>
Look in the right corner below!
    <div class="mymargin">
        <footer>
            <a href="abababab">fixedfooter NO hmargin-ontheright</a>
        </footer>           
    </div>
</body>
</html>

Upvotes: 1

Views: 711

Answers (2)

Susheel Singh
Susheel Singh

Reputation: 3854

Your footer tag is already taking 100% of the width.. So margin will be out of it.

It worked in the first case because you gave the width to the parent. so margin on the child worked. try to add 100% to footer in first case and even that wont work as required.

Upvotes: 1

Ashish Kumar
Ashish Kumar

Reputation: 3039

Try right instead of margin-right:

footer {
    clear: both;
    position: fixed;
    bottom: 0px;
    text-align: right;
    width: 100%;
    background-color: fuchsia;
    right: 20px;
}

jsfiddle: http://jsfiddle.net/ashishanexpert/3eFPt/

Upvotes: 2

Related Questions