Issues creating a box using CSS

Question

I want to create a box shape and I am having trouble. I want the box to have a background color, and then different color inside the box.
The box will then have a list of items using ul and li, and each list item will have a background of white, and the list item's background color is too stretch the entire distance of the inner box. Also, the list items should have a 1 px spacing between each one, so that the background color of the inside box color is visible.

Here is a rough sketch of what I am trying to do:

Answer 1

You can do this pretty cleanly with this css:

.box {
        width: 100px;
        border: solid #884400;
        border-width: 8px 3px 8px 3px;
        background-color: #ccaa77;
}

.box ul {
        margin: 0px;
        padding: 0px;
        padding-top: 50px; /* presuming the non-list header space at the top of
                              your box is desirable */
}

.box ul li {
        margin: 0px 2px 2px 2px; /* reduce to 1px if you find the separation
                                    sufficiently visible */
        background-color: #ffffff;
        list-style-type: none;
        padding-left: 2px;
}

and this html:

<div class="box">
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
   </ul>
</div>

DEMO