help.unused whitespace on right side of screen?

created a site and am not sure how to fill whitespace

[jbercute1007]

Hello, I created a site for a friend and although I am happy with the results, there is one outstanding issue that I am unsure how to fix: unused whitespace on the right side of the screen.
Here is what I have: the site is made up of a main content div (contentLayer) and within that parent div (from left to right of the screen) is an adLayer1 (ads for supporters will be posted here)
Next is an infoLayer in the middle of the page which contains navLayer (navigation links), logoLayer (place for the sites logo) and the infoLayer where all the main content of the page is displayed. To the right of this infoLayer is adLayer2 where more supporter ads will be displayed. Basically they wanted content flanked on each side with ads.
Anyway, my issue is that everything is positioned fine except for the fact that there is unused white space on the right side of the screen on most browsers. They really want to get rid of that white space but I am unsure how to make that happen. Im sure I have something in my CSS keeping me from expanding the site to the right (I posted my css below), can anyone tell me what Im doing wrong? Id really appreciate any assistance. Thank you!

#contentLayer {
border:1px solid black;
background-color:white;
left:0px;
top:0px;
width:100%;
height:650px;
z-index:1;
}
#navLayer {
position:absolute;
padding-top: 10px;
padding-left:10px;
background-color:#000000;
font-size:12px;
left:199px;
top:154px;
width:589px;
height:27px;
z-index:2;
}

#logoLayer {
position:absolute;
border:1px solid black;
background-color:#A5BA3C;
left:199px;
top:0px;
width:598px;
height:154px;
z-index:3;
}
#infoLayer {
position:absolute;
padding:5px;
font-size:13px;
background-image:url(images/footballbg.jpg);
width:588px;
left:200px;
top:190px;
z-index:4;
height:422px;
overflow:auto;
scrollbar-face-color:black;
scrollbar-arrow-color:white;
}
#adLayer1 {
position:absolute;
border:1px solid black;
background-image:url(images/grassbg.jpg);
left:0px;
top:0px;
width:198px;
height:648px;
z-index:2;
}

#adLayer2 {
position:absolute;
border:1px solid black;
background-image:url(images/grassbg.jpg);
left:798px;
top:0px;
width:198px;
height:648px;
z-index:2;
}

[csuguy]

Because you used absolute positioning - with exact pixel settings for left,top, width, and height - whatever you set it for it is going to display. It will not expand/contract to match the browser size. If you wanted that you would have to rewrite it using percentages for all of those things. If you just want to expand the right side, you can simply increase the width attribute of #adLayer2. But this may cause a horizontal scroll bar for users with a lower screen resolution. This maybe acceptable for you, test it out. Of course, then in a larger screen resolution your still going to have space.

Here's another option though - center all of your content horizontally. In addition to your contentLayer div (or maybe just change it for this) you need to wrap your content up in a div with a very specific width. Then set that divs position to relative. By doing that you can base your positioning off of the top-left corner of the layer - which is centered. That way - you'll always have even spacing on both the left and right side. You'll probably need some more changes for this approach - so if you want to implement it and need help just ask.

So basically your options are to 1) Create a design that expands/contracts to screen size or 2) A design of a fixed width which is centered horizontally. I'm sure other members can provide a couple other alternatives too. If you need further assistance just ask!

Ryan