navigation items 100% spread within a div with even padding

Question

I am trying to evenly spread navigation items within a div tag. My code goes below. It makes some calculation and gives the results.

On Chrome, Opera and Safari it works all right, but on IE8 and Firefox it does have some trouble. What I want is to convert all the results of calculations (li width, container width, padding) into percents instead of pixels to work on all browsers correctly.

Please, let me know if someone has the solution.

And my code sometimes makes also trouble after refresh, what can be the reason for this?

Thank you!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
    margin: 0;
    padding: 0;
}
body {
    width: 960px;
    margin: 0 auto;
}
.container {
    width: 100%;
}
.menu {
    width: 100%;
    list-style: none;
}
.parent {
    float: left;
    background: red;
    margin-right: 1px;
    padding: 0;
}
.parent:last-child {
    margin-right: 0px;
}
</style>
</head>
<body>
<div class="container">
  <ul class="menu">
    <li class="parent"><a href="#">О Фонде</a> </li>
    <li class="parent"><a href="#">Дети</a> </li>
    <li class="parent"><a href="#">Проекты</a> </li>
    <li class="parent"><a href="#">Новости</a> </li>
    <li class="parent"><a href="#">Как помочь</a> </li>
    <li class="parent"><a href="#">Вам нужна помощь?</a> </li>
    <li class="parent"><a href="#">Специалистам</a> </li>
    <li class="parent"><a href="#">Волонтерство</a> </li>
  </ul>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script>
$(document).ready(function() {
var a = $(".menu li.parent").length;
var b = 0;
$(".menu li.parent").each(function(){
    b = b + $(this).width() 
});
var c = ($(".container").width() - b - (a-1))/a ; 
var d = c/2;
$(".parent").css("padding", d)

});
</script>
</body>
</html>

It's advisable that you provide us with a http://www.jsfiddle.net with your relevant code. — Itay, Sep 07 '13 at 07:52
Here's a [demo](http://jsfiddle.net/9TqBD/). Your script doesn't spread the `

score 2 · Answer 1 · answered Sep 07 '13 at 09:03

You can use a CSS only solution for this.

Just use text-align: justify on the parent ul with inline-block child elements.

In order for justify to work however you need to fake two lines of text, but this is easily done by adding in a phantom element or what I prefer is using the :after pseudo element

There is slightly a little more to it that that, so here is a working fiddle:

http://jsfiddle.net/lee_gladding/cjvCC/

score 1 · Answer 2 · answered Sep 07 '13 at 08:17

1

Don't use Jquery for a start you don't need to. Here is the lines of css that I changed:

.menu {
    width: 100%;
    list-style: none;
    position: relative;
}
.parent {
    float: left;
    background: red;
    margin-right: 1px;
    padding: 2%;
}

Here is a working fiddle:

http://jsfiddle.net/Hive7/nn273/

answered Sep 07 '13 at 08:17

Hive7

3,599
2
22
38

Thanks, but it seams not to work for me as my site is multilingual and languages will be added and the width of the menu items is going to change. I want something dynamic, that will calculate for me everything. – gag Sep 07 '13 at 08:42

score 1 · Accepted Answer · edited May 23 '17 at 11:50

You can distribute all elements with padding in percentage equally over the full width using a CSS table. There's no need for JavaScript.

The problem occurs, when it comes to that margin you applied. Table cells don't have margins, so you have to work around it. I added a border instead on the right side. You can also work with border spacing, but it's a bit more complicated. As both, border-widthand border-spacing can't take percentages, you still have to calculate them. Therefor I've written a little script, that does that. You can call it "onresize" when working with a dynamic width. Have fun.

HTML

<div class="container">
    <ul class="menu">
        <li class="parent"><a href="#">О Фонде</a> </li>
        <li class="parent"><a href="#">Дети</a> </li>
    </ul>
</div>

CSS

ul {
    display: table;
    width: 100%;
    list-style: none;
}

ul > li {
    display: table-cell;
    padding: 1%;
    text-align: center;
    border-right: 1px solid white;
}

ul > li:last-child {
    border: 0;
}

JavaScript

var container = $('div.container');
var elements = $('ul.menu > li');

var borderSize = Math.ceil( container.width() / elements.length / 100);

elements.css('borderRightWidth', borderSize + 'px');

Demo

Try before buy

navigation items 100% spread within a div with even padding

3 Answers3