Support » Themes and Templates » Sidebar height problem

  • Hi,

    I’m trying to extend the second sidebar underneath the product navigation to stretch the whole content page.

    However i only seem to be able to set it a fixed sized to make it appear. I’ve tried height:100%; and auto but they don’t seem to work.

    .underside {
    background: url("") repeat-y;
    #products_page ul.categories {
        float: left;
        list-style: none;
        text-transform: uppercase

    webpage im working on ->

Viewing 4 replies - 1 through 4 (of 4 total)
  • That’s a well-known issue with floated columns — elements only extend as far as there is content — unless it’s a fixed height (and with dynamic content, that’s not generally possible). There are a few CSS work-arounds — one of which is to make the side column a sidebar and make the background color the same as what’s in the menu area.

    Google around and you’ll find many discussions of how to deal with it.

    Moderator Andrew Nevins


    You won’t be able to with that invalid markup.
    You can’t have this structure;

     <li> ... </li>
     <li> ... </li>
     <div class="underside"></div>

    I don’t know what the purpose of the underside is for, but if you just want the underside’s background colour expanded to the bottom of the main content, remove that <div class="underside"></div>. Then apply that background colour (actually an image) to the <ul> in that sidebar.

    You then need to restructure your HTML some more by putting the sidebar within <div class="products"></div>. This one of other steps to ensure your sidebar expands with the content.

    Moderator Andrew Nevins


    This level of support is not provided by forums, consider a CSS-specific forum or hiring someone.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Sidebar height problem’ is closed to new replies.