Резиновое меню

Недавно в целях повышения смотрибельности блока занимался всякими менюшками, блоками и тестами.
Итак, перед нами стоит следующая задача: создать меню, которое бы тянулось по всей ширине родительского блока. То есть левый пункт меню должен прижиматься к левому краю, а правый к правому. Между пунктами меню должно быть одинаковое расстояние. Вобщем все должно выглядеть как на рисунке ниже.

Как же это можно реализовать? Используя отступы между пунктами в процентах или задавая в процентах ширину каждого пункта мы не добъемся желаемого результата. На помощь здесь приходит текстовое выравнивание justify. При таком выравнивании все строки текста в абзаце, за исключением последней, растягиваются по всей ширине блока. Получается, что наша задача заставить растягиваться одну единственную строку текста. Для этого нужно добавить в строку длинный строковый (inline) элемент, который не умещался бы в первой строке и, следовательно, переносился бы на вторую, заставляя тем самым первую (наше меню) растягиваться по всей ширине. В качестве такого элемента можно использовать рисунок или любой строковый элемент с большим значением margin.

HTML

<div class="main-menu">

<a href="#">HTML</a>

<a href="#">CSS</a>

<a href="#">Javascript</a>

<a href="#">Вебмастеринг</a>

<img src="blank.gif" width="100%" height="1" alt="" />

</div>

CSS

.main-menu {

text-align: justify !important;

}

Для того чтобы не разносило пункты меню, состоящие из нескольких слов необходимо вместо пробела использовать символ &nbsp;.