Title: Sidebar height problem
Last modified: August 20, 2016

---

# Sidebar height problem

 *  [danny_getextra](https://wordpress.org/support/users/danny_getextra/)
 * (@danny_getextra)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/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("http://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 -> [http://www.askas.co.uk/products/footwear/](http://www.askas.co.uk/products/footwear/)

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/sidebar-height-problem/#post-3228763)
 * 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](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 6 months ago](https://wordpress.org/support/topic/sidebar-height-problem/#post-3228764)
 * 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](https://wordpress.org/support/users/danny_getextra/)
 * (@danny_getextra)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/sidebar-height-problem/#post-3228777)
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 6 months ago](https://wordpress.org/support/topic/sidebar-height-problem/#post-3228778)
 * This level of support is not provided by WordPress.org forums, consider a [CSS-specific forum](http://csscreator.com/forum)
   or [hiring someone](http://jobs.wordpress.net/).

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Sidebar height problem’ is closed to new replies.

 * 4 replies
 * 3 participants
 * Last reply from: [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * Last activity: [13 years, 6 months ago](https://wordpress.org/support/topic/sidebar-height-problem/#post-3228778)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics