CSS Forum

**piers2009** · 06-09-2009, 06:45 AM

Ok...

I'm trying to figure out how to resize a div to a set percentage of the users browser - regardless of how they resize it. And I want to do it dynamically (in that it resizes as the user resizes their browser) but - I'm not sure if this can be achieved with CSS or not...

So far then...

I'm using the setMovie function to embed a Quicktime called when clicking on a thumbnail using onClick,

And it embeds the Quicktime movies nicely into:

Code:

<!-- HTML for the Quicktime plugins -->
<div id="vContainer">
<div id="movieHost"></div>
</div>

But I've tried everything I could find, and i can't get anything to work scaling it as the user resizes their browser...

The embedded Quicktimes are given the parameters of 'height' 100%, 'width' 100% and 'scale' aspect.

The 'movieHost' div has no CSS styling but it is wrapped in the 'vContainer' div with the CSS styling:

Code:

#vContainer {
	position:absolute;
	width:640px;
	height:480px;
	z-index:3;
	margin-left: 20%;
	margin-right: auto;
	margin-top: 10%;
	margin-bottom: auto;
}

The page has no fixed size (I think) and I don't want any scroll bars anywhere if possible. The document is:

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Currently the page has a horizontal scrolling thumbnail absolutely positioned at the bottom of the browser and a logo absolutely positioned in the top right. I'm trying to make the quicktimes embed in the center of the browser (and resize dynamically).

Basically something similar to:

http://believemedia.wiredrive.com/l/...6bf9c4f5ed5e29

Though not as sophisticated, perhaps - and no need for the expanding/collapsing credit tray....

Any suggestions...?

**LadynRed** · 06-09-2009, 03:54 PM

You might want to read this:
http://www.autisticcuckoo.net/archiv...liquid-elastic

**piers2009** · 06-09-2009, 08:57 PM

Thanks for the response, LadynRed... I'll check it out.

**carterdea** · 06-10-2009, 02:28 PM

Piers,

I think this is what you wish to do too: http://www.alistapart.com/articles/c...ios-for-video/

Cheers,

Carter

**piers2009** · 06-10-2009, 11:29 PM

Wow, Carter - thanks!

That really is an elegant resize... and simple too.

I fired off a comment on the article to see if the resize can be extended to 'height' as well as width...

The problem I'm now having (of course :) is centering the whole mess in the browser. Any suggestions about which method might apply best would be much appreciated.