perfect left / right padding for columns - html

Question

If you have a number of block items in a list, I was wondering if there was a way to get
0 margin on the left,
0 margin on the right, and
margins between the items in the middle
Right now on the items in the list I only know how to do this margin:0px 5px 5px 0px;
This way there is no margin on the left, so it matches to the left of my container, but there is always 5px space on the far right column... however I need margin-right 5px to get space in between my items.
Any suggestions?
div.container{
width:calc(100% - 100px);
margin: 0 auto;
height:100%;
display:block;
background:black;
}
div div{
height:200px;
width:160px;
display:inline-block;
background:grey;
margin:0px 5px 5px 0px;
}
Ref: http://jsfiddle.net/Ly2M3/1/
Again I would like my items to be able to but up against the far left and right side of the container but also have margins to separate the items.

Answer 1

Yes, add text-align: justify to the div.container element.

Answer 2

I'm making another answer because it works well at centering the divs and it also matches the divs on the last line!
It requires a little knowing of the content you are using but some media queries can help you remove some extra space if you need to support multiple resolutions.
You need two things:
* The text justification (as Josh Rutherford answered) to align all lines except the last, and second
* A few invisible divs to fill the rest of the line so the browser can match the divs on the last line with the rest of the lines
The result is this: http://jsfiddle.net/wBe4F/1/, resize it so you can see the last line always matches the other lines no matter if there are 1, 2, 3, 4 or 5 divs, they always match.
So, the idea is to add extra divs with height 0px to fill one more line so the browser will also justify it and all visible divs will be aligned.
You only need to think how many ".extra" divs you put at the end. I would put enough .extra divs to cover a complete line with the widest screen size you want to support, then you could add media queries to hide unneded .extra divs if they are making too much extra space at the bottom of your container div (the background color is there to show that). Resize it small enough and you'll see all that space below the original divs created by all those unneeded .extra divs. You could give them an id for each .extra div and "display: none;" some of them if the resolution is less than some values to keep that controlled.
To make the extra divs the same width as the original divs just add them to the original divs declaration:
.data, .extra {
display: inline-block;
width: 120px;
height: 40px;
background: #666;
}
and then tweak them a little to make them invisible
.extra {
height: 0px;
}