Forums

Get help. Give help. A Web Design and Development Community.

Left Column Longer in Height than Right Column

  • # January 29, 2010 at 3:52 pm

    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;*/
    }

    # January 29, 2010 at 6:13 pm

    This reply has been reported for inappropriate content.

    I don’t think I understand. Could you take a screenshot of exactly what you are referring to?

    # January 30, 2010 at 7:44 am

    This reply has been reported for inappropriate content.

    Change the following in the CSS the height of .holder to 519px, height of .jScrollPanelContainer to 519px in the html, and in the CSS add height of 519px to #flashSlideshow and change margin to 0 2px;
    That should do it.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We have a pretty good* newsletter.