How do I make my background-color fill entire width of div when applied to a `ul li`?

Question

I'm using jQuery-UI-Layout plugin that creates a pane on the east side of the screen. When I create a list in it and apply a background-color to each <li> element, it doesn't span the width of the entire pane.

I would like it so that there is no white space on either side of the <li> , even if it has a bullet or number next to it (meaning if I decide to include a bullet or number, it should also be covered by the color). How can I do this?

Fiddle: http://jsfiddle.net/5EECD/497/

HTML:

<div class="ui-layout-center">Center</div>

<div class="ui-layout-east">
    <ol id="someList">
        <li class="not-selected">step 1</li>
        <li class="selected">step 2</li>
        <li class="not-selected">step 3</li>
        <li class="not-selected">step 4</li>
    </ol>

</div>

CSS :

.selected {
    background-color: #e90902;
    padding-top: 10px;
    border-bottom: 1px solid #808080;
    padding-bottom: 10px;
}

.not-selected {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #e9e9e9;
    border-bottom: 1px solid #808080;
}

Answer 1

Add this to your CSS file:

.ui-layout-pane-east {
    padding: 0 !important;
}

Don't do this from the browser's inspector. jQuery UI's inner workings are supposed to calculate widths on page load.

Answer 2

Try Removing the

padding: 10px

from the following in css

body > div.ui-layout-east.ui-layout-pane.ui-layout-pane-east

Answer 3

It might not be the best way of doing it, though you can expand the margins of the <li> to fill the pane.

li{
    margin: 0px -10px 0px -10px;    
}

JSFiddle

Answer 4

Here is your edited working Fiddle , with a List Style Disc "inside" the actual list item, by using the list-style-position style. To remove the Disc icon, simple use the style "none" instead.

If you set the font-size to 0px and that will remove all white space from list items, as long as the list item has a given font size which is shown in the example.

I just added a little CSS to your working CSS:

ol#someList {
  font-size:0px;
  padding-left:0px;
  list-style:disc;
  list-style-position: inside;
}

ol#someList li {
  font-size:14px
}

I also added a body style to remove the default margin of 8px to show you that there is no white space to left or right of the list items.

Hope that helps! Michael G