Lining up list items horizontally - css

Question

Ok, so am I missing something but I can't seem to line up a simple ul list of list items so that they stretch the entire width of their parent div. Here is an example of my problem here http://jsfiddle.net/37E55/17/.
What I'm trying to do is get grey boxes to line up in a row so that the first box's left hand edge is inline with left hand edge of the #wrapper div and the last box's right hand edge is inline with the #wrapper div's right hand edge.
I have tried successfully to line the boxes up by giving them an absolute positioning but is there a way to use a combination of margin and padding that I'm missing?
#wrapper {
width: 400px;
height: 300px;
background-color:#F0F0F0;
margin: 10px auto;
}
.box {
width: 92px;
height:92px;
background-color:#333;
margin:0px 10px 10px 0px;
float:left;
}
<div id="wrapper">
<ul>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
</div>​

Answer 1

I knew there was a way to do it with inline-block instead of floating (if you do not have to support overly old browser).
Here's a fiddle demo!
The li do not have margin applied, they are evenly disposed in the area and cling to borders. I followed this guide.
ul {
font-size: 0 !important; /* remove physical spaces between items */
text-align: justify;
text-justify: distribute-all-lines; /* distribute items in IE */
list-style-type: none;
margin: 0;
padding: 0;
}
/* fully justify all items in browsers other than IE */
ul:after {
content: "";
display: inline-block;
width: 100%;
}
ul li {
text-align: left; /* customize to suit */
vertical-align: top; /* can customize to suit */
display: inline-block;
width: 31.3%; /* optional, only need for text content to wrap */
margin-bottom: 1em; /* optional, customize to suit */
}

Answer 2

use :last-child to select the last box and apply margin-right: 0 to it. Make sure the remaining margins will fill the space properly.
.box {
width: 92px;
height:92px;
background-color:#333;
margin:0px 10px 10px 0px;
float:left;
}
.box:last-child {
margin-right: 0;
}
If you have to stick with a width of 92px you won't get them to align properly. The remaining space that the margins need to fill is 32px, which doesn't divide evenly by 3.

Answer 3

The first thing you need to do is remove the last element's right margin.
.box:last-child { margin-right:0; }
Beyond that, sometimes you don't have the ability to fit elements with, for example, exact even margins based on their space and the size of the container. Sometimes you can apply different margins on (for example) every-other element to keep the layout looking "even" but to handle the lack of space, something like:
.box:nth-of-type(2n) { margin-right:14px } /* add extra pixels to right margin of even elements*/
In your case though, only one of the boxes needs extra margins, say, the first. Here's how I did it (with color contrast increased just to make it easier to see).
.box {
width: 90px;
height:90px;
background-color:blue;
margin:0px 13px 10px 0px;
float:left;
}
.box:last-child {
background:green;
margin-right:0;
}
.box:first-child {
background:yellow;
margin-right:14px;
}
Cheers

Answer 4

Your boxes with the margins were too large. Note that padding is in additional to the specified height and width. See it work on http://jsfiddle.net/37E55/32