The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Overflow Issue? Span?

  • # March 5, 2013 at 12:00 pm

    I would like to have my embedded video span the width of the wrapper. Within the wrapper is a div called main-column that is keeping everything 40px away from the edge of the wrapper. So, when I embed a Vimeo video into a page, it naturally crops the video to be 880px rather than the desired full 960px. Is this something that can be fixed with overflow? I am really not sure. Here is the website, if you want to give it a looksy. Thank you in advance!

    # March 5, 2013 at 12:08 pm

    Check out fitvid.js (

    EDIT: Oh…and this…

    # March 5, 2013 at 12:12 pm

    Just a suggestion that is unrelated to the question, you shouldn’t use text shadows on body copy. That creates legibility issues.

    Anyway, I agree with Paulie.

    # March 5, 2013 at 12:16 pm

    >Anyway, I agree with Paulie.

    FTW! :)

    # March 5, 2013 at 12:56 pm

    This reply has been reported for inappropriate content.

    Thank you for the tip. So, fitvid.js will basically make my video the correct size no matter what the size of the container is? That’s cool, but I think I need to word my question differently because that was not what I was having trouble with. Basically, I want my Vimeo video to span the full width of the wrapper, which is 960px. I want it from edge to edge. But the main-column is keeping the video from doing that because there is a limit of 880px. How do I get my video to break the bounds of the main-column while staying within the main-column and keeping it centered?

    @chrisburton, I am only using text-shadow on the introductory paragraph and h2s. The rest of the text will be just plain, off-white ‘Droid Sans’ text. Would you still suggest against that?

    Thank you for your help thus far!

    # March 5, 2013 at 1:04 pm

    You could either break up the wrapper or use absolute positioning.

    The problem is that the h2’s don’t look like headings. Headings are/should be much shorter with just a summary and it doesn’t have to be a complete sentence. What I see is paragraph text. But yes, I would lose it.

    # March 5, 2013 at 1:08 pm

    remove the overflow from #main-column and add a left margin of -40px to the iframe

    # March 5, 2013 at 1:30 pm

    This reply has been reported for inappropriate content.

    @chrisburton, but if the text is perfectly legible, then what is the point of not having it? I guess we will have to agree to disagree on this point.

    Thank you muchly, @wolfcry911. Your method is a lot better than what I ended up doing. I created a new div id="main-column-mini" which had a width of 880px and then I made main-column have 960px once more. Then I proceeded to wrap the main-column-mini div around anything I wanted to be 880px wide. But alas, your way is much better. Thank you for the fix.

    @Paulie_D, and I will add fitvid.js in just a little bit for finicky re-sizing issues.

    # March 5, 2013 at 1:40 pm

    I didn’t say it wasn’t legible, I was trying to make a point that it makes it less legible. Regardless, I don’t think text shadow works there.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed