Fluid width/height parent container for a jQuery slider?

[iamshawnrice]

I am using [camera](http://www.pixedelic.com/plugins/camera/ “http://www.pixedelic.com/plugins/camera/”) as a content slider on [this](http://dev.magnetmediafilms.com/indextest2/about-us/ “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.

[iamshawnrice]

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!

[Author]

Posts