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