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.

enter image description here

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;
}

Would one of my previous [answer to css table-cell equal width question](http://stackoverflow.com/questions/10525744/css-table-cell-equal-width/10526275#10526275) be useful? It's about LAYOUT; neither semantics nor elements will be harmed by doing so ^^ — FelipeAls, Apr 21 '14 at 20:02
Edit:ed my question. This is what I have now. Fixed values. I was thinking that I could give them 100% and in a magical way they all see there is other elements there and change automatically :) — troligtvis, Apr 21 '14 at 20:03
@FelipeAls I was about to answer this question using some simple javascript, but your linked answer is awesome. I had no idea such voodoo existed. — Ben Roux, Apr 21 '14 at 20:07
@FelipeAls has the same idea I had, though no doubt more elegantly executed. Regardless, here is the demo I put together to demonstrate the principal of using display `table-cell`: http://jsfiddle.net/WY9R5/ — Joseph Marikle, Apr 21 '14 at 20:07
Thank you FelipeAls! Your code helped me! http://stackoverflow.com/questions/10525744/css-table-cell-equal-width/10526275#10526275 — troligtvis, Apr 21 '14 at 20:10
OP you're welcome @JosephMarikle Your fiddle is way more pleasing to my eyes than mine ^^ — FelipeAls, Apr 21 '14 at 20:21
@BenRoux Really useful for RWD, in addition to floats and inline-block as you can rearrange it below a certain breakpoint. And browsers have no less than 2 voodoos, depending on the value of `table-layout` ^^ — FelipeAls, Apr 21 '14 at 20:24
@FelipeAls write your answer as an answer so I can Toggle it as answered :) — troligtvis, Apr 21 '14 at 20:27

score 3 · Answer 1 · answered Apr 21 '14 at 20:10

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) + '%');
});

score 0 · Answer 2 · answered Apr 21 '14 at 20:08

As a person who uses javascript more than I should, the first thing that came to mind is to run some JavaScript on load, and then it can go though the 'child' property of the surrounding element (the one with class progress-part-list), then divide 100 by that, then set the styles to that.

Here's some code that would do this:

<script type="text/javascript">
var divd=100/(document.getElementsByClassName('progress-part-list')[0].children.length);
[].forEach.call(document.getElementsByClassName('progress-part-list')[0].children,function(curChild){
    curChild.style.width=divd+'%';
});
</script>

Put that just after the closing tag of the <section>

That's very crude, though, you might want to fix it to make it more elegant (like modifying class styles instead of inline styles, going through all instead of just the first progress-part-list, etc

It's also untested

Ty for answering me :) Will also try out your code. :) – troligtvis Apr 21 '14 at 20:11 — troligtvis, Apr 21 '14 at 20:11

score 0 · Answer 3 · answered Apr 21 '14 at 20:10

0

Try giving each of the inside-elements a margin-right of -4px and use the following JS/jQuery:

$(document).ready(function(){
    $('div div').width($('div:first-child').width() / 3);
});

Here's a fiddle: http://jsfiddle.net/JthgV/

Is that what you're looking for?

P.S. Forgive the inline style. I did it that way for the sake of saving time.

answered Apr 21 '14 at 20:10

Justin

1,341
11
24

I think he wants a consistent width for the container... adding elements to yours doesn't resize the other elements: http://jsfiddle.net/9hXRk/ – qJake Apr 21 '14 at 20:12
Yes, I'm assuming only three divs inside the container. You're right, that may not be the case. – Justin Apr 21 '14 at 20:13
OP mentioned that. I was too hasty. Yours is the answer I'd go with. – Justin Apr 21 '14 at 20:32

Divide elements width depending on amount of elements

3 Answers3