I have a long rectangular container with rounded corners.
Inside the container, there are 3 child divs.
Here is an image demonstrating the setup:
In the illustration above, the first child container (white) and the third one (red) also have rounded corners to match the main container.
The width of the child containers can be adjusted by the user. This means that users have the flexibility to change the widths of all three child containers according to their requirements.
However, when I set the width of the third container to 2%, an issue arises:
The same problem occurs when I do this with the first child container—it overlaps the rounded borders of the main container.
Child container 1 (white) is aligned left while child container 3 (red) is floated right.
I am looking for a solution to prevent this overlapping from occurring.
If needed, I can utilize JS and JQuery for this task.
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>