Databases
StackOverflow2013
Postsdbo
POWhy are some div's sticking out if the parent div is set to overflow:hidden?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy are some div's sticking out if the parent div is set to overflow:hidden?
    text
    copied!<p><strong>Question:</strong> 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?</p> <p><strong>Example:</strong> <a href="http://jsfiddle.net/YNS8b/" rel="nofollow">http://jsfiddle.net/YNS8b/</a></p> <p>Thanks!</p> <p><strong>Code:</strong></p> <pre><code>&lt;div id = "top_bar" &gt; &lt;div id="top_left_button" &gt;border&lt;/div&gt; &lt;div class="trapezoid-border"&gt;&lt;/div&gt; &lt;div class="trapezoid"&gt; border &lt;/div&gt; &lt;/div&gt;​ #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 } ​ </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload