Resizing the flipping page proportionally to the window size?

[graphycraft]

Hi folks,

It is me again. I just want to resize the flip-page book on my website, but dont know how. I tried adding code to the *css file like

width: 100%

and so, but It doesnt work.

Can someone please help me?

The page is www.ideagrapher.com

[HostTed]

I had a quick look and
The background image width on the pages for the flip are 600px so that is likely affecting it.

If I get time this weekend I want to have a play with that code as could possibly use the same code for one of my projects, but I would definitely look at the image BG size of 600px and see what changing that and adjusting things accordingly does as you are surely getting 1200 for two x 600 so the maths says that will be something that needs addressing (though I am no expert on such things and will know more over the weekend).

Where's that page flip code from btw?

[graphycraft]

I had a quick look and
The background image width on the pages for the flip are 600px so that is likely affecting it.

If I get time this weekend I want to have a play with that code as could possibly use the same code for one of my projects, but I would definitely look at the image BG size of 600px and see what changing that and adjusting things accordingly does as you are surely getting 1200 for two x 600 so the maths says that will be something that needs addressing (though I am no expert on such things and will know more over the weekend).

Where's that page flip code from btw?

The script is made by Charles Mangin under creative commons license But I don't remeber from what page I found it. Thank you for the tip, I will try it.
-------------------------------------------------
Well I tried it and change the widht of 600px to 100% and all the pages disappeared.

[graphycraft]

*CSS code for the page1

#pagesContainer {
		margin:0 auto; 
		background-color: transparent; 
		position: relative;
		overflow: hidden;
		top: -155px;
		}

	#pagesContainer .pageContent {
		display: none;
	   }
	
	#pagesContainer .pageContent.page1 {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		margin-left: 0;
		}
		
	#pagesContainer .pageContent.page2 {
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
		display: block;
		}		
		
		
	#pagesContainer .pageContent.page3 { 
		margin-left:0; 
		padding: 0; 
		position:absolute; 
		left:0; 
		top:0;
		padding-left: 0;
		width: 0;
		overflow: hidden;
		display: block;
		}
		
	#pagesContainer .pageContent.page4 { 
		margin-left:0; 
		padding: 0; 
		position:absolute; 
		left:0; 
		top:0;
		overflow: hidden;
		display: block;
		}

	#pagesContainer .pageContent.page0 {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		}
		
	#pagesContainer .pageContent.pageN1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		overflow: hidden;
		display: block;
		}