Sidebar height problem (5 posts)

  1. danny_getextra
    Posted 2 years ago #


    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("http://www.askas.co.uk/wp-content/uploads/2012/11/underside.jpg") repeat-y;
    #products_page ul.categories {
        float: left;
        list-style: none;
        text-transform: uppercase

    webpage im working on -> http://www.askas.co.uk/products/footwear/

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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.

  3. Andrew
    Forum moderator
    Posted 2 years ago #

    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.

  4. danny_getextra
    Posted 2 years ago #

  5. Andrew
    Forum moderator
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.