Avoiding huge spaces caused by margins on floats - css

Question

Consider the fallowing example:
http://jsfiddle.net/swLyX/
With the fallowing HTML:
<div id="container">
<p> Some text aligned the same as the below set of images
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<p> And some other text
</div>
And CSS:
#container {
width: 299px;
background-color: #c55;
}
.inner {
float: left;
margin: 20px 40px 20px 0;
width: 60px;
height: 60px;
background-color: black;
}
p{
clear: both;
}
The issue at hand is the large empty space at the right side of the second div because the margin of the third div throws it over to the next row.
Has one red div containing some text and three smaller divs floated to the left with a margin to the top, left and bottom to keep the other elements at a distance. In a real setting imagine that the red div is the container of a blog post and adjusts the margin to the other content and that the three black divs are images.
The important thing is that both the text and the first black div should be horizontally aligned to the left. Is there any way to make the right margin of the third div not throw it onto the second row without changing the sizes of the margin between the divs or breaking the alignment of the elements?

Answer 1

If the goal is to have any number of items accommodate any number of parent container widths, then with CSS, alone, there's no easy way to figure out what are the 'right-most' elements.
What I would suggest doing is this:
http://jsbin.com/uvegef/1/edit
html:
<div id="outerWrapper">
<div id="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
css:
#outerWrapper {
background: pink;
width: 89px;
overflow: hidden;
}
#wrapper {
width: 110%;
}
.item {
float: left;
background: blue;
width: 20px;
height: 20px;
margin-right: 10px;
margin-bottom: 10px;
}
The example above has a 89px outer parent wrapper, which is 1px shy of the 90px needed to fit 3 items + their margins.
The idea is to give the wrapper an overflow of hidden then add an inner wrapper with a width wider than the parent to accept the 'extra right margin'. Adjust as needed for the situation.

Answer 2

You can use the :last-of-type pseudo element. Add this to your CSS.
.inner:last-of-type {
margin-right: 0;
}
See here: http://jsfiddle.net/swLyX/5/