Question

I have a long rectangle shape container with a radius.

And I also have 3 child divs, in the container.

Here it is:

As you can see in the picture above, the first child container (white) and the third (red) have also been set a radius to match to containers radius.

Now, the child containers width will be dynamic (changeable by the user). So the user will be able to change the widths of all three child containers to meet their needs.

But take a look at what happens when I give the third container a width of 2%:

the same thing happens when i do the same to the first child (it overlaps the containers rounded borders).

Child container 1 (white) is floating to the left and child container 3 (red) is floating to the right.

I need a way to stop the overlapping from happening.

I am able to use JS and JQuery incase your wondering.

Thanks

EDIT:
CSS:

.parent {
    border: 1px solid #5B5B5B;
    height: 30px;
    width: 80%;
    right: 0%;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    <? set_radius("25px",true);
    set_box_shadow("1px","1px","#F8F8F8");?>    
    overflow: hidden;
    z-index: 3;
}
    .child_class {
        display: inline-block;
        position: relative;
        width: auto;
        height: 100%;
        margin: 0px;
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #5C5C5C;
        box-sizing: border-box;
    }

    #child1 {
        width: 33.33;
        background-repeat: repeat-x;
        background-position: center center;
        <? set_radius("25px",false,false,true,false,true);?>
        float: left;
        background-color: #fff;
    }
    #child2 {
        width: 33.33;
        background-repeat: repeat-x;
        background-position: center center;
        background-color: #0CF;
    }

    #child3 {
        <? set_radius("25px",false,true,false,true,false);?>
        background-repeat: repeat-x;
        background-position: center center;
        width: 33.33;
        float: right;
        background-color: #F00;
    }

HTML:

<div class="parent">
          <div class="child_calss" id="child1"></div><div class="child_calss" id="child2"></div><div class="child_calss" id="child3"></div></div>

Answer 1

In your CSS:

parent{
    overflow: hidden;
}

Then you won’t have to bother with matching the border-radius on the children, either.

Edit

I’ve created this jsfiddle to demonstrate:

1. Not needing border-radius on the children
2. overflow: hidden rounds the children when they overlap
3. Unnecessary background- properties on the children are removed
4. Expected behavior at small percentages

Update

Another note on this:
If you want the CSS/HTML to perform logic for you (not drop the last element out of the bar), you have a clear misunderstanding of what CSS and HTML do.

I’ve updated the jsfiddle to provide a sort of patch-fix to that issue. The third child is positioned absolutely at the far right, so that it will always stay in the bar.

Update

Finally, here’s the bug in Webkit that doesn’t correctly clip the background. It appears there’s nothing you can do right now except possibly something like this:

<div class="hasBorder hasBorderRadius">
    <div class="hasBorderRadius hasHiddenOverflow">
        <div class="containsContent">
        </div>
    </div>
</div>