Question

I need some text to appear below embedded media (in this case a video), and I would like the text to right-align to the video.

I’m not sure how to do this, since the layout needs to be fluid. Some videos will be wider than others.

Currently the text is right-aligning to the wrapping div.

Here’s a fiddle with what I have so far http://jsfiddle.net/thwackukulele/2N6a9/

I would like the text “Watch more videos on our YouTube Channel” to align to the video’s right edge.

Thanks for any help!

Answer 1

Videos can be varying width but they are never wider than your 960px set on the content-unit?

If content-unit is centering everything, set framewrap to inline-block. This will make it shrink-wrap to its contents (here, the video), and if content-unit has text-align: center set on it, then the inline-block framewrap will be centered (at whatever width it turns out to be). Now, because its width is contrained to the widest content (the iframe here, an inline element), the h4 can be set to text-align right and the text should be restricted to the right side of framewrap, since the block h4 will still expand to 100% of whatever framewrap is.

Ah, you have a lot of positioning and margins in there that I can’t see what they are doing, so I don’t expect this code will really fix your problem but… looking at JSFiddle is like viewing through a screen magnifier. Fun stuff http://jsfiddle.net/2N6a9/2/ I made content-unit blue and framewrap red so you could see how the caption gets wrapped. You could add a bit of right padding on the h4 if you want to nudge the text a bit more to the left.

Oh I didn’t add code for IE6,7 etc. If you are supporting them, remember to set framewrap to display: inline after the inline-block declaration.

Edit 2: I didn’t move the facebook stuff back left