Menu
In the following example, the bottom padding is ignored, and the text flows to the bottom of the element before hiding. What is causing this?
<div style="overflow: hidden; width: 300px; height: 100px; padding: 50px;">
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
</div>
A view with Firebug (purple is padding, blue is actual content area):
562
To hide overflow from rendering outside the element's box, you can set the overflow property to “hidden.” This will clip the content at the box's padding edge and not allow the user to view the content beyond that edge by scrolling or dragging their finger on a touch screen or any other means.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure. Save this answer.
overflow: hidden With the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
The overflow-clip-margin CSS property determines how far outside its bounds an element with overflow: clip may be painted before being clipped.
I prefer to use as few <div>s as possible.
<div class="container">
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
</div>
.container{
padding: 30px 30px 0;
position: relative;
width: 240px;
height: 170px;
border:1px solid #000;
overflow: hidden;
}
.container:after{
content: ' ';
display: block;
background-color: red;
height: 30px;
width: 100%;
position: absolute;
bottom: 0;
}
http://jsfiddle.net/bgaR9/
naturally in a world without IE < 9
188
The bottom padding exists but the content pushes the bottom padding down and is not visible because of overflow:hidden. What you can do is place the content in a container like so:
<div style="overflow:hidden; width: 300px; height: 200px; border:1px solid #000; ">
<div style="overflow:hidden; width:auto; height:140px; border:30px solid #ff0000;">
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
</div>
</div>
You can play with the fiddle here - http://jsfiddle.net/BMZeS/
Hope this helps.
10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
