Encountering difficulties when using 100% in the container CSS. Referencing the attached image, you can see the RED background color displayed on the right side image.
Below is the link to my CSS code on jsfiddle. Please review it and advise on the modifications needed to prevent the display of the background angles (red, yellow, green).
The total width assigned to different IDs exceeds 100% (39% on the left, 50% in the middle, and 34% on the right), totaling 123%. Although I acknowledge this is an incorrect approach, I'm unsure of an alternative method to correct the design.
After implementing the CSS on my computer screen with a resolution of 1600 by 900, I only see the RED background in the right image. However, on a smaller screen, as shown in the link, all other background images are displayed.
HTML
<div id="container">
<div id="left"><img src="http://media-cdn.tripadvisor.com/media/photo-s/03/c3/1f/5f/working-people-exhibit.jpg"/></div>
<div id="middle"><img src="http://global.fncstatic.com/static/managed/img/Health/Women%20Working.jpg"/></div>
<div id="right"><img src="http://www.koindo.com/images/WORKING%20PEOPLE%20IMAGE.jpg"/></div>
</div>
CSS
#container{
width:100%;
background-color:orange;
height:300px;
overflow:hidden;
position:relative;
}
#left{
position:absolute;
left:-4%;
display:inline-block;
width:39%;
background-color:red;
height:300px;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:1;
overflow:hidden;
}
#left img{
transform:skew(20deg,0deg);
-ms-transform:skew(20deg,0deg); /* IE 9 */
-webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/
width:100%;
height:100%;
}
#middle{
position:absolute;
margin-left:30%;
display:inline-block;
width:50%;
background-color:green;
height:300px;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:2;
border-left:10px solid white;
overflow:hidden;
}
#middle img{
transform:skew(20deg,0deg);
-ms-transform:skew(20deg,0deg); /* IE 9 */
-webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/
margin-left:-11%;
width:100%;
height:100%;
}
#right{
position:absolute;
right:-4%;
display:inline-block;
width:34%;
background-color:red;
height:300px;
border-left:10px solid white;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:3;
overflow:hidden;
}
#right img{
transform:skew(20deg,0deg);
-ms-transform:skew(20deg,0deg); /* IE 9 */
-webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/
width:100%;
height:100%;
}
(Find the code on JSFiddle: http://jsfiddle.net/swati712/XQNzu/5/)