CODEWITHSUNDEEP
javascripthtmlcss
rivenagares
rivenagares

Reputation: 117

How do I keep a footer div at the bottom right?

I found a lot of examples regarding images that didn't work exactly for what I need. I have a simple footer that I use for copyright/social media linking information and I would like it to float to the right so that on screen resize it doesn't interfere with the navigation that is at the upper left.

/* footer */

footer {
   position:fixed;
   left:20px;
   bottom:20px;
   z-index:1;
   }
footer small {
   float:right;
   clear:both;
   margin:0 0 5px 0;

In the html:

<footer>
        <small>&copy; 2003-<script language="javascript" type="text/javascript">
                var today = new Date()
                var year = today.getFullYear()
                document.write(year)
                </script> Name of Site | <a href="Link to Site">The Site</a>
                          | <a href="Link to Site #2">Site #2</a>
        </small>
</footer>

Its a pretty minimal design and I'm trying to keep it really simple so when its time for me to try to optimize for mobile it will work. Any help is appreciated.

Upvotes: 2

Views: 880

Answers (4)

I&#39;m a dog IRL
I&#39;m a dog IRL

Reputation: 29

I've modified your code a little bit to do the job.

footer {
   position:fixed;
   left:0px;
   right: 0px;
   bottom:20px;
   z-index:1;
   text-align: right;
}
footer small {
   margin:0 20px 5px 0;
}

Upvotes: 1

fishsmith
fishsmith

Reputation: 33

I would try to assign a height and width to your footer. Also make sure you give it a display type of block. Not all browsers respect footer as a block element.

Maybe something like this:

footer {
     position: fixed;
     display: block;
     right: 0;
     bottom: 0;
     height: 20px;
     width: 100px;
   }

Upvotes: 1

kei
kei

Reputation: 20521

You need to set a width on the footer

DEMO

footer {
   position:fixed;
   left:20px;
   bottom:20px;
   z-index:1;
   width:100%; /*Added*/
   }
footer small {
   float:right;
   clear:both;
   margin:0 30px 5px 0;
}

Upvotes: 1

j08691
j08691

Reputation: 208002

Just add right:0 (or some number) to pull it to the right.

footer {
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:1;
    right:0;
}

jsFiddle example

Upvotes: 4

Related Questions