Divide elements width depending on amount of elements

Question

As the title say "Divide elements width depending on amount of elements" I want to have an progress-like bar where I can add elements and depending on the amount elements I have the progress bar would split.

This is fixed values now (33%, 33% and 34%) and I want them to change depending of how many elements I use.

Like if I have 4 elements in my list I want it to automatically divide equally with 4. Is there any easy way to do it? Maybe using only CSS? I don't mind javascript, but Im just saying that it could be something I've missed :)

Edit: I created 3 div's and gave them all different classes.

<section class="progress-part-list">
    <div class="progress-part-left">
        
    </div>
    
    <div class="progress-part-right">
        
    </div>
    
    <div class="progress-part-mid">
        
    </div>
</section>

In my CSS with my fixed values it is:

.progress-part-mid
{
    height: 100%;
    width: 34%;
    background-color: #52ff00;
    opacity: 0.9;
    display: block;
    float:left;
}

.progress-part-left
{
    height: 100%;
    width: 33%;
    background-color: red;
    opacity: 0.9;
    display: block;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    float:left
}

.progress-part-right
{
    height: 100%;
    width: 33%;
    background-color: yellow;
    opacity: 0.9;
    display: block;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    float:right;
}

Answer 1

Are you looking for something like this?

http://jsfiddle.net/FK7N5/

You want to select all the elements, and use that to calculate the percentage.

It doesn't matter how many elements you include in your container. Just make sure they all have a common class like "progress". Remember, you can have more than one class on an element, so you can have <div class="progress progress-first"> or <div class="progress progress-middle">.

The jQuery to make it work:

// Get all parts of the progress bar.
var bars = $('.bar');

// With each one, calculate the percentage and apply the width.
bars.each(function()
{
    $(this).css('width', (100 / bars.length) + '%');
});