Block of pictures aligned to the left and right side

Task

So, the layout comes to you, and in it (horror of horrors!) The block of pictures by the designer is diligently aligned on both sides. Like that:

Well, we only make up rubber!

There are two options:
Impose without alignment, and the designer can say that it is impossible to align on either side, or

Impose as it should.

So, the idea

If there are 5 pictures, then in fact, we need to find 4 equal distances between them.
And what if 4 of them are wrapped in a block with 1/4 of the width, and the fifth is pulled out of the block, and give it a wrap?
')
It sounds scary, so here's the diagram:

If it was not clear from the picture either, nobody will tell the better code)

A little distraction

The list of pictures is often created from an unnumbered list (I think this is most correct).
But according to the schemes of HTML4, XHTML1.0, and the same HTML5, it is impossible to group li-divs div, because the only valid element inside UL (and OL) is the element LI.

Therefore, we will do this in HTML5, but on the section-article elements :) (I have long wanted to make up something in HTML-5)
In general, the method will work in the same way on any scheme, only you have to refuse to use UL, and build all divs.

Code in the studio!

HTML5:

<! DOCTYPE html >

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< meta name ="language" content ="ru" />
<!--[if IE]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->

< title > — ! </ title >
</ head >
< body >

< header >< h1 > </ h1 ></ header >

< section class ="images" >
< article >< img src ="1.png" alt ="" /></ article >
< section >
< article >< img src ="2.png" alt ="" /></ article >
< article >< img src ="3.png" alt ="" /></ article >
< article >< img src ="4.png" alt ="" /></ article >
< article >< img src ="5.png" alt ="" /></ article >
</ section >
</ section >

< footer > , internet explorer 6-7-8, firefox 1-2-3, opera, chrome 2, safari 3 </ footer >

</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

Now CSS:

header, section, article, footer {
display: block;
}

header, footer {
margin: 10px 20px;
padding: 20px;
}

.images {
width: 75%;
margin: 20px;
padding: 20px;
background: #f5f5f5;
}
.images article {
float: left;
}
.images section {
overflow: hidden;
zoom: 1;
}
.images section article {
width: 25%;
// margin-left: -2px; /*- 7, -, , :)*/
text-align: right;
}

* This source code was highlighted with Source Code Highlighter .

curious

1. Inetrnet explorer number 7 is always not enough pixel. And the sixth - two. Well, if everything is clear with the sixth (we remember his craving for even distances), then why this happens in the seventh is a mystery covered in gloom.
2. Because of this, at first there was an idea to make instead of 25%, 24.9%. This is then remembered about the negative indents. But the opera struck me to the heart. It turns out she does not understand non-integer values ​​of percentages (24.9% she understands as 24% - which is critical). She is the only one from all over the zoo.

findings

Maybe someone has already used this, but I have not seen articles describing this method. (Looking bad, yeah)

The unambiguous advantage of this method is the following:

1. Looks pretty interesting for veb, not beaten reception
2. Simple implementation, cross-browser compatibility (internet explorer 6-7-8, firefox 1-2-3, opera, chrome 2, safari)
3. The lack of a large number of hacks (1 hack is used), the complete absence of access and javascript code (That js refers to HTML5, does not affect the work of the method))

However, there are also disadvantages:

1. Logic cannot be stored in the one-dimensional list of ul-li
2. Bad semantics

Thanks for attention.
Ps. Here is an example . I apologize for hosting with my server so far problems (
In order to view the clean code, here is the archiver.

UPD. I didn’t look well, the habrazhiteli say:
Article
Example with images
Block example
Examples of various implementations (including non-working examples) from Chris