CODEWITHSUNDEEP
htmlcssalignment
max_
max_

Reputation: 24481

Span won't right align in footer

I have a few span elements filling up my footer, and I am trying to get the copyright span to be right aligned, rather than bunched together with all the other elements. Please can you tell me where I am going wrong?

<footer>

    <span>Blog</span><span>Hire</span><span>About</span><span id="copyright">Copyright &copy; 2012 Max Kramer</span>

</footer>

footer {
    width:  50%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

footer span {
    display: inline-block;
}

footer span #copyright{
    text-align: right;
}

Upvotes: 1

Views: 2196

Answers (2)

Krycke
Krycke

Reputation: 3186

A span is a flow object, meaning it don't have a width. To give it a width it needs to be a block element which will give you a width to right-align it to. But by making it block, it will be pushed down to the row below the other spans, which makes you need to float it right.

You need to:

#copyright {
    text-align: right;
    display: block;
    float: right;
}

Upvotes: 0

zenkaty
zenkaty

Reputation: 1548

first, remove the space between span and it's ID - they are the same element, not an ID nested inside a span. second, use float, not text align :)

footer span#copyright{
  float: right;
}

you can also just do this:

footer #copyright{
  float: right;
}

you also don't need to specify "inline-block" for spans - that's their default value for "display" anyway.

Upvotes: 2

Related Questions