Why are some div's sticking out if the parent div is set to overflow:hidden?

Question

Question: I'm trying to get all the elements to align and fit into one div without overflowing. Why are some div's sticking out if the parent div is set to overflow:hidden? How can I fix this?

Example: http://jsfiddle.net/YNS8b/

Thanks!

Code:

<div id = "top_bar" >
        <div id="top_left_button" >border</div>
        <div class="trapezoid-border"></div>    
        <div class="trapezoid"> border </div>
</div>


#top_bar{
    background-color: #000;
    border-bottom: 1px solid #666;
    color: #222;
    position:fixed;
    left:0px;  
    top: 0px;
    width:100%;
    overflow:hidden;
    height: 50%;
    font-weight: normal;
    white-space: nowrap;
    color: white;
    z-index:20; 
    line-height: 45px;
    min-width:320px;
    max-width: 320px;
    max-height:48px;
    border-radius: 5px;
    text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; 
}

#top_bar:after {
    content: '';
    width: 10%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}


.trapezoid{
    vertical-align: middle;
    position:absolute;
    border-bottom: 60px solid #446DB2;
    border-left: 45px solid transparent;
    border-top-left-radius:30px;
    *border-top-right-radius:15px;
    *border-bottom-right-radius:3px;
    height: 0;
    width: 50px;
    display: inline-block;
    right:1px;
    z-index: 100;
}



.trapezoid-border{
    vertical-align: middle;
    position:absolute;
    border-bottom: 60px solid rgba(225, 225, 225, 0.5);        /* Color Changed will be pseudo-border color */
    border-left: 45px solid transparent;
    border-top-left-radius:30px;
    *border-top-right-radius:15px;
    *border-bottom-right-radius:3px;
    height: 0;
    width: 53px;                       /* Extra 3 pix when compared to .trapezoid class width */
    display: inline-block;
    right:1px;
}



#top_left_button {
    color: white;
    height: 100%;
    overflow:hidden;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
#top_left_button{
    width: 20%;

    border-right: 2px solid #666;
    background-color: #446DB2
}

They're not sticking out of it, they just look like it because you have rounded corners on the containing element and the contents aren't masked by the rounded corners of the parent. Relevant: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera — Sampson, Dec 09 '12 at 03:13
It's been a while, but want to post this as an answer and I'll mark it correct? — Emin Israfil, Nov 19 '13 at 18:33

score 1 · Accepted Answer · edited May 23 '17 at 10:25

At one time browsers supported rounded corners, but didn't always mask all of the contents that might appear within the curve of the border itself. Many solutions were suggested, including rounding any children that appear in proximity to the parents already-rounded corner, using proprietary features like a webkit mask, etc. Today, modern browsers will mask the contents far better, so this should no longer be an issue. In fact, opening this demo up in modern versions of Chrome and Internet Explorer reveal that the browser has itself corrected the behavior.

Additional discussion can be found here: How to make CSS3 rounded corners hide overflow.

Why are some div's sticking out if the parent div is set to overflow:hidden?

1 Answers1