Uniform alignment of the blocks width

Continuing my "css-dig" has a new idea, to analyze another relevant topic which concerns the uniform alignment of the blocks in width. basically my thorough research, I already posted in your blog, but since my last job loved the Habra-community, I decided to make here a small obzorchik this short article to no Habra-soul missed her for sure. So, in the words of Yuri Gagarin: "let's Go."

In General, the layout problems periodically there are times when there is a need to align some list to the screen width. The items on this list should align evenly, hugging their extreme elements to the container bounds, and the distance between them should be the same.


The figure shows that the points align in width adjacent to the side walls and making the spacing between a – equivalent.

How it works?

In fact, we should get whatever makes text-align: justify with text. Since the behavior of our blocks is very similar to the result of the alignment of words in a string using this property. I think many had some idea what kind of property and estimated its work.

*In this review, I did not post the analysis of the stages of the algorithm, this can read the article. The main thing that you understood.

the

Our mission

Our task is to build a solution based on this algorithm. To use, simulate, replace, do anything important in the end to get what we want. Namely the evenly-aligned elements in the string, the side of which is pressed against its borders. And of course the distance (spaces) between these elements must be exactly the same at any width container.

* just want to inform you that options (working and not) actually happened as much as 4 pieces, plus a bunch of interesting and useful disassembled nuances, great article (in my style). So here vkratse I will describe some of them :)

the

Options 1 and 2

The first thing that came to my mind, is to take the five points and to build alignment on the good-old float-Ah, so I made two options (one, two), which unfortunately was not quite universal. Rather first of them do not have a ride, and second was quite a work, but only for fixed width points.
Anyone interested in a detailed study of these variants, welcome to the article.

the

Options 3

But the third option is based on the algorithm text-align: justify and inline-blocks, which have borne fruit, but not quite. First, I had to dilute the list, an additional element, and secondly, in IE6-7 there are some interesting facts to dig in which I had a lot of fun. These browseren this decision refused to work at all. And guess who came to my aid. Right, SelenIT2! But he came no, and with a great idea (which he blatantly stole from our mutual colleagues GreatRash), from which I was just in shock. As it turned out, a pair of magical CSS3 properties come from ancient times can turn this decision into a cross-browser and make it work with text-align: justify in our old IE6-7.

third option
The whole secret is in the last line of the following code:
the

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

the

ul {
font: 14px Verdana, Geneva, sans-serif;
text-align: justify;

/* Reset the parent*/
line-height: 0;
font-size: 1px; /* 1px for Opera */

/* A cure for IE6-7*/
text-justify: newspaper;
}

As you can see, using the text-justify: newspaper; ul is our version becomes cross-browser. This is due to the fact that the property text-justify: newspaper designed to increase or decrease the spacing between letters and between words. MSDN says that this thing is "the Most featured form of alignment to the Latin alphabet", but in this article yet there are Supplement that for the Arabic lyrics is the property and pull the letters themselves.

the

4

So, option 4 was the rejection of extra markup, which resulted in a new problem in IE6-7.

Is the fact that text-justify: newspaper only gives you the opportunity to stretch our letters (inline-block) but not the team. Simply put, he says the line, as if he wished she were stretched, and text-align: justify is a tensile force. I.e., text-align: justify is responsible for the stretching of the string, and text-justify: newspaper only clarifies how this tension will occur.

In the review of the 3rd option, I said SelenIT2 told me two properties, one of which (text-justify: newspaper) helped us in the previous embodiment, and the other just helped with that! And this time they teamed up and already with double force were able to win the last option.
the

ul {
font: 14px Verdana, Geneva, sans-serif;
text-align: justify;

/* Reset the parent*/
line-height: 0;
font-size: 1px; /* 1px for Opera */

/* A cure for IE6-7*/
text-justify: newspaper;
zoom:1;

/* Include the last line*/
text-align-last: justify;
}

Welcome! text-align-last — the property that enables the algorithm text-align: justify in the very last line of text, if it is applied to this same text-align: justify. Simply put, when we apply to the text text-align: justify, then, seeing this, text-align-last first specifies that he's doing is wrong and that he will now have to work and the last sentence too.

And that's the result

By the way, these properties specific, and not some proprietaria (other than newspaper, which is now called something else). So that no kitten will not suffer) And I want to emphasize that the bug in IE6-7 poburan with CSS3 when anyone else seen this? :)

In General, summing up the review, I want to say that I am glad that I managed to find a really good solution. And not just to find, to understand and to bring it to absolute cross-browser with minimal code and without cluttering up the markup.

If a brief review to someone was not enough, I recommend to read this one (already large) an article with a thorough debriefing. But, I warn you! The article really is not small, so before you start reading you can stock up on your favorite cookies with tea :)

Article based on information from habrahabr.ru