Left Column Longer in Height than Right Column

[Historical Forums User]

Hey guys. I have an issue here I’ve been trying to crack all morning.

I took over a website that was created and launched recently and immediately noticed a problem with the layout. The left column containing a scroll bar is longer than the right column causing there to be an ugly and noticeable white gap. I have been trying to get both columns the same size, however have not been too successful.

I appreciate any help and will be on standby.

Here’s a link to the website: http://www.unqboutique.com

Here’s the bit of CSS for the main divs I am referring to:

Code:

#main {background:url(images/main_bgd.gif) repeat-y; width:900px; overflow:hidden; float:right; display:inline; margin-right:6px;}

#leftNav {width:204px; float:left; display:inline; border-left:3px solid #000; border-top: 2px solid #000; text-align:left; overflow:hidden;}
#leftNav h3 {text-transform:lowercase; font-size:16px; margin:12px; padding:0; float:left; clear:both;}
#leftNav ul {margin:0 auto; padding:0; font-size:12px; text-transform:uppercase; float:left;}
#leftNav ul li a {background:#4B4949; width:163px; height:28px; margin-top:2px; padding-left:20px; line-height:28px; display:block; text-decoration:none;}
#leftNav ul li a:hover {background:#747474; color:#fff;}

#rightCol {background:#fff; width:692px; float:right; display:inline; overflow:hidden;}
#flashSlideshow {margin:2px; overflow:hidden;}

Here’s CSS for the Scroller:

Code:

.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}

.jScrollPaneTrack {
position: absolute;
cursor: pointer;
right: 0;
height: 100%;
padding-bottom: 1px;
border:solid 1px #494b4a;
}
.jScrollPaneDrag {
position: absolute;
cursor: pointer;
overflow: hidden;
background:url(images/drag.gif) no-repeat 1px -2px;
height: 85px !important;
border-top:solid 1px #000;
}
.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
background:url(images/but_ar.gif) no-repeat center top;
height: 19px;
}
a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
background:url(images/but_ar2.gif) no-repeat center top;
height:20px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
/*background-color: #f00;*/
}

[Author]

Posts