Grow your CSS skills. Land your dream job.

Positioning the blockquote cite footer

  • # December 19, 2012 at 8:37 am

    Hi guys.. I just got to say I love this site! :) I am still pretty new at css and html but I am starting to get a hold of it better and better thanks to sites like this..

    I am having some problem positioning the cite under my blockquotes on my site and was wondering if anyone could help me out? If you take a look at the blockquote on this post [http://www.spetakkel.org/european-design-awards/]( “http://www.spetakkel.org/european-design-awards/”). I am trying to position it closer to the blockquote and right-aligned..

    I managed to style it using this code(under) but I can’t figure out how to position it…

    blockquote footer {
    font-family: “futura-pt”, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 15px;
    position:relative;
    right:10px;
    }

    I guess I am doing something wrong?

    # December 19, 2012 at 8:55 am

    Hey StigBratvold, when the element you have is `position: relative;` it’s not relative to it’s parent container, and adding `right: 10px;` will not “snap” it to the right side. What you need is `position: absolute; right: 10px;` and your container to have `position: relative;` this way it will snap. Try this bit of code:

    blockquote, q {
    quotes: none;
    position: relative;
    }

    blockquote footer {
    font: 400 italic 16px “futura-pt”, Arial, sans-serif;
    margin-bottom: 15px;
    position: absolute;
    right: 10px;
    bottom: -18px;
    }

    # December 19, 2012 at 9:28 am

    @stigbratvold I’m not really a big fan of absolute positioning unless it’s strictly necessary as it removes the element from the natural flow of the document.

    I’d recommend combining float: right; and a negative margin to achieve the same effect.

    Regarding having a footer element inside a blockquote – I know there were discussions about this before whether it would be officially valid markup, I think that it might not have made it into spec.

    # December 19, 2012 at 9:34 am

    It worked perfectly! :) Thanks theCSSguru

    # December 19, 2012 at 9:37 am

    @theCSSguru, when an element is position: relative it is not relative to it’s parent container. It’s relative to it’s normal static position and that position is retained for the document layout.

    @andy_unleash, float also removes an element from the document flow. I think either version would work here. I’d recommend a bottom padding on the blockquote to reserve space for the cite.

    Another alternative would be to make the cite block level and text-align: right;

    # December 19, 2012 at 9:37 am

    andy_unleash: So is there any other best practices about how you can ad the “cite” under the blockquote? It was the only solution I came across googling the issue some…

    I would love to hear it if there is any better ways…

    # December 19, 2012 at 9:39 am

    @wolfcry911, So where would I ad that code?

    # December 19, 2012 at 9:41 am

    which code? There are three proposed options. I wouldn’t hesitate on using any of the three. You’ve already used the AP, so I’d just stick with it.

    # December 19, 2012 at 9:44 am

    Allright, yeah it looks exactly how I want it to look now so I’ll stick with it…

    Thanks again for advice :)

    # December 19, 2012 at 9:49 am

    I mentioned previously, adding a bottom padding to reserve space for the cite, however, its already taken care of with the bottom margin on the p inside the blockquote…

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".