某些div的页脚部分出现问题

Question

I have a headache with all this positioning stuff, so I decided to ask you about it; I already read blogs about the positioning of this kind of things but as a beginner, it's a bit difficult to find the exact answer.

I have the following problem:

In the image you will see what I have (I can't post it, so here is the link of the SS: http://gyazo.com/bbea3f21abf77515288719296e496fcc ), I want to move: "copyright blablabla" at the bottom of the footer using all the width of the footer, I already tried everything like:

footer #copyright{
    font-size: 75%;
    top: 20em; /* just trying*/
    position: relative;
    text-align: center;
    width: 100%;

But the div keeps hitting the other elements (the terms and conditions, privacy and stays exactly like you see in the image). The code of the "terms and conditions, etc, is this one:

footer li a{
    font-size: 90%;
    text-decoration:none; /* Quita toda decoracion del texto*/
    position: relative;
      /* este comando convierte en boton el reectangulo*/
    vertical-align: text-top;
        float: right;
         width: 30%;

Can anyone help me?

PD: I add my html code:

    <footer>


        <li><a href="#contactus">Contact us</a></li>
        <li><a href="#privacy">Privacy policy</a></li>
        <li><a href="#terms">Terms and conditions</a></li>
        <li><a href="#aboutus">About us</a></li>

        <a id="copyright">Copyright 2015 Pepito S.L., All Right Reserved.</a>

    </footer>
</body>

And about my CSS, is this one:

* {
    margin: 0;
    padding: 0;
    font-family: verdana;
}

footer {
    width: 100%;
    height: 12em;
    background-color: #363636;
}

footer li {
    list-style: none;
    text-transform: uppercase;
}

footer li a{
    font-size: 90%;
    text-decoration:none; /* Quita toda decoracion del texto*/
    position: relative;
      /* este comando convierte en boton el reectangulo*/
    vertical-align: text-top;
        float: right;
         width: 30%;


         /* Borde para ver el div*/
    color: #696969;
      border: 1px solid #f00;

}

footer a #copyright{
    font-size: 5%;
    position: absolute;
    text-align: center;
    bottom: 0;

/* Borde para ver el div*/
    color: #696969;
      border: 1px solid #f00;

 }

Answer 1

Try following on the footer

footer {
    position: absolute; /* or fixed if you want */
    bottom: 0;
}

This will set it to the bottom of the page with a space of 0 pixel, so directly at the bottom.

Remember this technic if you also want to place something relativly at a position like example right and the width of the element is unknown, so you don't have to calculate how much it has to be from the left, but only set the space from the right side, like right: 25px; .

Also read and understand the differences betweet every position property (relative, absolute, static, fixed) this will help you ALOT! After I understood this, I felt like leveling up 10 levels! This helped so much, that I could optimize everything I ever did and prevented maaaaany problems I had in the past.

EDIT

At this point the question has been edited and the code was given. I assumed the top links are the header, but now I understand that the WHOLE thing should be the footer.

So positioning the footer alone won't have an affect, so the solution from Mathieu David should fit.

Let this be an example for: Why I always should provide as much as possible information and details, also ask as best as possible and not to self-confident, because other people don't know what you are actually trying

Answer 2

What you probably want is to set position: relative in the footer div and put position: absolute in the element that contains the copyright.

<footer>
    ...
    <div class="copyright">Copyright</div>
</footer>

and in the css

footer{
    position: relative;
}

.copyright{
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

JSFidle

Answer 3

Use position: absolute; (and relative to footer ).

footer {height: 130px; position: relative;}
footer #copyright {position: absolute; bottom: 0;}

https://jsfiddle.net/zkxjasf0/