Positioning the blockquote cite footer

[StigBratvold]

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?

[theCSSguru]

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;
}

[Andy Howells]

@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.

[StigBratvold]

It worked perfectly! :) Thanks theCSSguru

[wolfcry911]

@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;

[StigBratvold]

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…

[StigBratvold]

@wolfcry911, So where would I ad that code?

[wolfcry911]

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.

[StigBratvold]

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

Thanks again for advice :)

[wolfcry911]

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…

[Author]

Posts