CSS: how to make children fit parent's width

Question

I create parent element with a number of div children elements that I then calculate width for in JavaScript, depending on data-value attribute.

If I sum up the calculated width for all children I will end up with 100%. But for some reason children would not really occupy 100% of parent's width: a portion of white pixels appears right after the last child.

This is a Fiddle that demonstrates this: http://jsfiddle.net/tqVUy/42/

Chrome and Firefox render it fine, I face this problem in Safari and Opera (please see the image below).

Besides that, overflow property does not work as expected, as children elements overlap the parent div (again, relevant only in Safari and Opera).

Questions:

1. Is there other (right) way to make children fit parent?
2. Rounded corners and overflow: hidden for the parent, can I make it look the same across all browsers?

Answer 1

I also face that type of problem. That's why define border-radius to the child also. Write like this:

#component > div:first-child{
    border-radius:30px 0 0 30px;
}
#component > div:last-child{
    border-radius:0 30px 30px 0;
}

Check this http://jsfiddle.net/tqVUy/49/

Answer 2

Added css:

#component>div{height:100%;}
#component>div:first-of-type{border-radius:30px 0 0 30px;}
#component>div:last-of-type{border-radius: 30px;}

Edit in js:

$('#component').children().not(':last').each(function () {

What happens:
The last div will not float left, and will just fill the space that is left. I added rounded corners to the first and last div to fix the corner issue. the last div has a 30px radius in every corner, because the div is actualy behind the other divs (you can see this with inspect element)

Demo:
http://jsfiddle.net/tqVUy/48/