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

Fluid width/height parent container for a jQuery slider?

  • # October 10, 2012 at 11:48 am

    I am using [camera]( “”) as a content slider on [this]( “this”) page.

    I would like to set a width/height/background image for the parent div so the space the slider will occupy is drawn prior to the slider loading, to avoid a big jump once the slider loads.

    To do that, I used the following code:
    #camera_bed {
    width: 100%;
    height: 396px;
    However, the page is dynamic in width. And that height is inappropriate for smaller screen sizes.

    Has anyone else run into this issue? Is there a solution in CSS or am I going to need to get jQuery involved?

    Thanks in advance.

    # October 10, 2012 at 2:20 pm

    I found a very workable solution via Chris’s fluid video container:

    .camera_bed {
    width: 100%;
    height: 0;
    padding-bottom: 36%;

    Worked like a charm!

Viewing 2 posts - 1 through 2 (of 2 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