Grow your CSS skills. Land your dream job.

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

    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

    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.

*May or may not contain any actual "CSS" or "Tricks".