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 {
position:relative;
height:100%;
width:200px;
float:left;
background: url("https://www.askas.co.uk/wp-content/uploads/2012/11/underside.jpg") repeat-y;

}

#products_page ul.categories {
    float: left;
    width:200px;
    margin:0;
    padding:0;
    list-style: none;
    text-transform: uppercase
    height:100%;

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

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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

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

    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.

    Thread Starter danny_getextra

    (@danny_getextra)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This level of support is not provided by www.ads-software.com 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.