Uniform block alignment in width

Continuing their “css-excavations”, a new idea emerged, disassembling another relevant topic by bone, which concerns the uniform alignment of blocks in width. In principle, I have already posted my thorough research in my blog , but since my previous work was very much liked by the Habra community, I decided to make here a short brief reviewer of this article so that not a single Habra soul would miss it for sure. So, as Gagarin said: “Let's go.”

In general, in layout tasks, there are occasionally moments when there is a need to align some list with the width of the screen. In this case, the items of this list should be evenly aligned, pressing their extreme elements to the container boundaries, and the distance between them should be the same.


The figure shows that the points are aligned in width, adjacent to the side walls and making the indents between them - equivalent.

How it works?

Essentially, we need to get what text-align: justify does with the text. Since the behavior of our blocks very much resembles the result of alignment of words in a string using this property. I think many already have some idea what this property is and its approximate work.
')
* In this review I did not post the analysis of the steps of the entire algorithm; you can read about it in the article itself . The main thing is that you understand the essence.

Our task

Our task is to build a solution based on this algorithm. Apply, simulate, replace, do anything, the main thing in the end get what we want. Namely - evenly aligned elements in the line, the side of which is pressed to its borders. And of course, the distances (gaps) between these elements should be exactly the same for any width of the container.

* I just want to let you know that the options (working and not so much) actually turned out to be as many as 4 pieces, plus a bunch of interesting and useful disassembled nuances, on a huge article (in my style). Therefore, here I will describe some of them in brief :)

Options 1 and 2

The very first thing that came to my mind was to take a list of five points and build alignment on good old floats , so I made two options ( one , two ), which unfortunately turned out to be not quite universal. More precisely, the first of them did not roll at all, and the second turned out to be quite a working one, but only for a fixed point width.
Who is interested in a detailed study of these options, you are welcome in the article itself .

Options 3

But the third option is already built on the text-align: justify algorithm and inline blocks, which bore fruit, but not quite. Firstly, I had to dilute the list with an extra, additional element, and secondly, in IE6-7 interesting facts came to light, in which I was very pleased to rummage. In these browsers, this solution refused to work at all. And guess who came to my rescue. True, SelenIT2 ! But he came not one, but with a great idea (which he brazenly stole from our common colleague in the GreatRash shop), from which I was just in shock. As it turned out, a couple of CSS3 magical properties from ancient antiquity can turn this solution into a cross-browser and make text-align: justify in our old IE6-7.

third option

The whole secret was in the last line of the following code:

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li class="helper"></li> </ul> 

 ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /*   */ line-height: 0; font-size: 1px; /* 1px  Opera */ /*   IE6-7*/ text-justify: newspaper; } 

As you can see, using text-justify: newspaper; at ul our option becomes cross-browser. This is due to the fact that the text-justify: newspaper property is designed to increase or decrease the spacing between letters and between words. MSDN states that this thing is “The most sophisticated form of alignment for the Latin alphabet,” but in this article there is also the addition that for Arabic texts this property draws the letters themselves.

Options 4

Well, option 4 was the rejection of additional markup, which resulted in new problems in IE6-7.

It turns out the whole thing is that text-justify: newspaper only makes it possible to stretch our letters (inline-block), but not the command. Simply put, he tells the line how he would like it to be stretched, and text-align: justify is a stretching force. Those. text-align: justify is responsible for stretching the string, and text-justify: newspaper only specifies exactly how this stretching will occur.

In the review of the third option, I said that SelenIT2 gave me two properties, one of which (text-justify: newspaper) helped us in the previous version, and the other just helped in this! And this time they united and were able to defeat the last option with double force.

 ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /*   */ line-height: 0; font-size: 1px; /* 1px  Opera */ /*   IE6-7*/ text-justify: newspaper; zoom:1; /*     */ text-align-last: justify; } 

Meet text-align-last is a property that enables the text-align: justify algorithm in the very last line of text if this very text-align: justify is applied to it. Simply put, when we apply the usual text-align: justify to the text, then, seeing this, text-align-last indicates to the first that he is doing poorly and that he will now have to work in the last line too.

And here, actually, the result

By the way, these properties are specified , and not any proprietary (except for the value of newspaper, which is now called otherwise). So no kitten will suffer) And I want to emphasize that the IE6-7 bug is overcome with the help of CSS3 - who else has it seen? :)

In general, summing up the review, I want to say that I am glad that I managed to find a really worthy solution. And not just to find it, but to figure it out and bring it to absolute cross-browser compatibility by spending a minimum of code and not littering the markup.

If a brief review seemed to someone a little, then I recommend reading this (already large) article with a thorough debriefing. But I warn you! The article is really not small, so before you start reading it is better to stock up on your favorite tea cookies :)