Hey guys, I've built this CSS carousel, and the dimensions seem to be adding an extra white box on the right side. I don't know where it's coming from, even after messing with the variables multiple times, so I'll post it and see what you guys can do. Here's the page exclusive to the carousel, not embedded in a website yet. The final width should be 576.

<html>
<head>
<style type="text/css">
/* Carousel Styles */
#pageContent {
padding: 0px 4px 0 4px; margin: 0 0 0 0; background:#ffffff;
font: 12px Arial, Helvetica, sans-serif; COLOR: #444; TEXT-ALIGN: left
}
.content {
padding:2px 6px;
text-align: left;
}
.topContent {
padding-top:20px;
padding-bottom: 30px;
}
.sideItem {
text-align: center;
padding: 0;
font: 10px Verdana, Helvetica, sans-serif;
}
#carouselArrow {
position: absolute;
top: 320px;
z-index: 100;
}
#carouselArrow a:hover {
background-color: transparent;
}
#carouselLink:hover {
text-decoration: none;
color: inherit;
font-size: inherit;
}
#carouselLink:hover #carouselInfo {
opacity: 1;
filter: alpha(opacity = 100);
zoom: 1;
}
#carouselImage {
width: 580px;
height: 320px;
position: relative;
text-decoration: none;
}
#carouselImage a {
color: inherit;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
text-decoration: none;
}
#carouselImage a:hover {
background-color: #000000;
}
.carouselThumb, .carouselThumbOn {
width: 72px;
height: 72px;
}
.carouselThumb {
opacity: 0.2;
filter: alpha(opacity = 20);
zoom: 1;
}
.carouselThumbOn {
opacity: 1;
filter: alpha(opacity = 100);
zoom: 1;
}
.carouselThumbLink {
float: none;
}
#carouselInfo {
position: absolute;
top: 250px;
width: 580px;
height: 78px;
background: black;
opacity: 0.8;
filter: alpha(opacity = 80);
zoom: 1;
}
#carouselTitle {
position: absolute;
top: 260px;
text-transform: uppercase;
letter-spacing: -1px;
left: 10px;
color: #eee;
font: 24px Arial, Helvetica, sans-serif;
font-weight: bold;
text-shadow: #000 1px 1px 1px;
}
#carouselDesc {
position: absolute;
top: 290px;
letter-spacing: -1px;
left: 10px;
color: #777;
font: 14px Arial, Helvetica, sans-serif;
font-weight: bold;
text-shadow: #000 1px 1px 1px;
}
/* End Carousel Styles */
</style>
</head>
<body>
<!-- CAROUSEL -->
<script type='text/javascript'>
// Don't change this variable
maxVideoWidth = 580;
</script>
<table align="center" cellpadding='0' cellspacing='0'>
<tr><td align='left' style='text-align:left;font-family:Arial, Helvetica, sans-serif;' class='sideItem'>
<div width='580' style='position: relative;'>
<div id='carouselArrow' style='left: 36px;'><a id='carouselArrowLink' href='/archive/?sid=rvb' style='text-decoration: none;'><img src='ARROW URL GOES HERE' width='16' height='8' style='float:none;' border="0"></a></div>
<!-- Sets initial item shown -->
<a href='[LINK FOR FIRST IMAGE]' id='carouselLink'>
<div id='carouselImage' style='background:url([FIRST IMAGE LOCATION]) top center no-repeat;'>
<div id='carouselInfo'></div>
<div id='carouselTitle'>Sno</div>
<div id='carouselDesc'>Your favorite frigid friend</div>
</div></a></div>
<table cellpadding='0' cellspacing='0'>
<tr><td colspan='11' height='2'></td></tr>
<tr>
<!-- First thumbnail image -->
<td align='left' width='72.5' style='padding-right:2px;'><a href='[LINK FOR FIRST THUMBNAIL]' onmouseover='updateCarousel(0, true);' class='carouselThumbLink'><div id='carouselThumb0' class='carouselThumbOn' style='width:72px;background:url([FIRST THUMBNAIL IMAGE LOCATION]) top center no-repeat;'></div></a></td>
<!-- Remaining thumbnail images -->
<td align='left' width='72.5' style='padding-right:2px;'><a href='[LINK FOR SECOND THUMBNAIL]' onmouseover='updateCarousel(1, true);' class='carouselThumbLink'><div id='carouselThumb1' class='carouselThumb' style='width:72px;background:url([SECOND THUMBNAIL IMAGE LOCATION]) top center no-repeat;'></div></a></td>
<td align='left' width='72.5' style='padding-right:2px;'><a href='[LINK FOR THIRD THUMBNAIL]' onmouseover='updateCarousel(2, true);' class='carouselThumbLink'><div id='carouselThumb2' class='carouselThumb' style='width:72px;background:url([THIRD THUMBNAIL IMAGE LOCATION]) top center no-repeat;'></div></a></td>
<td align='left' width='72.5' style='padding-right:2px;'><a href='[LINK FOR FOURTH THUMBNAIL]' onmouseover='updateCarousel(3, true);' class='carouselThumbLink'><div id='carouselThumb3' class='carouselThumb' style='width:72px;background:url([FOURTH THUMBNAIL IMAGE LOCATION]) top center no-repeat;'></div></a></td>
<td align='left' width='72.5' style='padding-right:2px;'><a href='[LINK FOR FIFTH THUMBNAIL]' onmouseover='updateCarousel(4, true);' class='carouselThumbLink'><div id='carouselThumb4' class='carouselThumb' style='width:72px;background:url([FIFTH THUMBNAIL IMAGE LOCATION]) top center no-repeat;'></div></a></td>
<td align='left' width='72.5' style='padding-right:2px;'><a href='[LINK FOR SIXTH THUMBNAIL]' onmouseover='updateCarousel(5, true);' class='carouselThumbLink'><div id='carouselThumb5' class='carouselThumb' style='width:72px;background:url([SIXTH THUMBNAIL IMAGE LOCATION]) top center no-repeat;'></div></a></td>
<td align='left' width='72.5' style='padding-right:2px;'><a href='[LINK FOR SEVENTH THUMBNAIL]' onmouseover='updateCarousel(6, true);' class='carouselThumbLink'><div id='carouselThumb6' class='carouselThumb' style='width:72px;background:url([SEVENTH THUMBNAIL IMAGE LOCATION]) top center no-repeat;'></div></a></td>
<td align='left' width='72.5' style='padding-right:2px;'><a href='[LINK FOR EIGHTH THUMBNAIL]' onmouseover='updateCarousel(7, true);' class='carouselThumbLink'><div id='carouselThumb7' class='carouselThumb' style='width:72px;background:url([EIGHTH THUMBNAIL IMAGE LOCATION]) top center no-repeat;'></div></a></td>
</tr></table>
<script type='text/javascript'>
var carouselItems, carouselOn, carouselTimer;
function updateCarousel(num, manual) {
if (manual) {
window.clearInterval(carouselTimer);
carouselTimer = window.setInterval('twizzleCarousel()', 10000);
}
if (!carouselOn) {
carouselOn = 0;
}
if (!carouselItems) {
carouselItems = new Array;
// Carousel items
carouselItems[0] = new Array('Sno', 'Your favorite frigid friend', '[FIRST IMAGE LOCATION]', '[LINK FOR FIRST IMAGE]');
carouselItems[1] = new Array('Arbo', 'Made from real wood!', '[SECOND IMAGE LOCATION]', '[LINK FOR SECOND IMAGE]');
carouselItems[2] = new Array('Self<sup>3</sup>', 'Steox3', '[THIRD IMAGE LOCATION]', '[LINK FOR THIRD IMAGE]');
carouselItems[3] = new Array('Momo Tribute', 'Tribute to Marshall Alexander', '[FOURTH IMAGE LOCATION]', '[LINK FOR FOURTH IMAGE]');
carouselItems[4] = new Array('Sven', 'Destroyer of Worlds', '[FIFTH IMAGE LOCATION]', '[LINK FOR FIFTH IMAGE]');
carouselItems[5] = new Array('Boot-Bodied Bobby', 'Kid got the build of a boot', '[SIXTH IMAGE LOCATION]', '[LINK FOR SIXTH IMAGE]');
carouselItems[6] = new Array('A little Birdie told Me', 'Revenge of Valentines day', '[SEVENTH IMAGE LOCATION]', '[LINK FOR SEVENTH IMAGE]');
carouselItems[7] = new Array('Portal Petites Part 3', 'Personality Cores', '[EIGHTH IMAGE LOCATION]', '[LINK FOR EIGHTH IMAGE]');
}
document.getElementById('carouselThumb' + carouselOn).className = "carouselThumb";
document.getElementById('carouselThumb' + num).className = "carouselThumbOn";
carouselOn = num;
document.getElementById('carouselArrow').style.left = ((carouselOn * 73) + 36) + 'px';
document.getElementById('carouselTitle').innerHTML = carouselItems[num][0];
document.getElementById('carouselDesc').innerHTML = carouselItems[num][1];
document.getElementById('carouselImage').style.backgroundImage = "url(" + carouselItems[num][2] + ")";
document.getElementById('carouselLink').href = carouselItems[num][3];
document.getElementById('carouselArrowLink').href = carouselItems[num][3];
}
function twizzleCarousel() {
if (!carouselItems) {
carouselItems = new Array;
// Carousel items
carouselItems[0] = new Array('Sno', 'Your favorite frigid friend', '[FIRST IMAGE LOCATION]', '[LINK FOR FIRST IMAGE]');
carouselItems[1] = new Array('Arbo', 'Made from real wood!', '[SECOND IMAGE LOCATION]', '[LINK FOR SECOND IMAGE]');
carouselItems[2] = new Array('Self<sup>3</sup>', 'Steox3', '[THIRD IMAGE LOCATION]', '[LINK FOR THIRD IMAGE]');
carouselItems[3] = new Array('Momo Tribute', 'Tribute to Marshall Alexander', '[FOURTH IMAGE LOCATION]', '[LINK FOR FOURTH IMAGE]');
carouselItems[4] = new Array('Sven', 'Destroyer of Worlds', '[FIFTH IMAGE LOCATION]', '[LINK FOR FIFTH IMAGE]');
carouselItems[5] = new Array('Boot-Bodied Bobby', 'Kid got the build of a boot', '[SIXTH IMAGE LOCATION]', '[LINK FOR SIXTH IMAGE]');
carouselItems[6] = new Array('A little Birdie told Me', 'Revenge of Valentines day', '[SEVENTH IMAGE LOCATION]', '[LINK FOR SEVENTH IMAGE]');
carouselItems[7] = new Array('Portal Petites Part 3', 'Personality Cores', '[EIGHTH IMAGE LOCATION]', '[LINK FOR EIGHTH IMAGE]');
}
newOn = carouselOn + 1;
if (!carouselItems[newOn]) {
newOn = 0;
}
updateCarousel(newOn);
}
var carouselTimer = window.setInterval('twizzleCarousel()', 5000);
</script>
<!-- END CAROUSEL -->
</body>
</html>