I have a div containing text and image and text details within ul li and below is the html structure . I have applied overflow hidden to class .sbox but it doesn't seem to work and the text details doesn't appear to be hidden and overflown.
JSFiddle - http://jsfiddle.net/SAN6n/
<div id="content" class="contentList">
<ul id="slist" class="storyList">
<li>
<div id="storyBox1" class="sbox">
<div class="boxContent" >
<span class="overlay"><h5>Picture1 </h5></span>
<div class="txtOverlay"><h3>This is spring and weather looks good ...</h3</div>
<span><img src="http://img13.imageshack.us/img13/38/picture11tp.jpg"/></span>
</div>
</div>
</li>
</ul>
</div>
.storyList {
width:100%;
height:100%;
}
.sbox {
float:left;
width:300px;
height:150px;
padding: 5px 7px 8px 5px;
margin-top:20px;
margin-right:40px;
background:white;
border:1px solid #DDD;
<!--border radius-->
-webkit-border-radius: 3px;
-moz-border-radius: 2px;
border-radius: 3px;
overflow: hidden;
}
.boxContent {
width:100%;
height:100%;
border: 1px solid #777;
}
.storyList li {
list-style:none;
}
.overlay {
float:left;
opacity: .7;
background: #000;
height: 40px;
width: 300px;
position: absolute;
}
h5{
float:left;
margin-top:0px;
padding:0 0 0 5px;
font-family: Tahoma;
letter-spacing: 0.5px;
font-size:30px;
color: white;
}
.txtOverlay {
opacity: .7;
background: #000;
height: 110px;
width: 300px;
position: absolute;
margin-top:150px;
z-index:1;
font-weight:bold;
float:left;
font-family: OpenSansRegular;
letter-spacing: 0.5px;
font-size:10px;
color: white;
}
Set the div with a width or height, (otherwise it won't know whether something is overflowing). Then, add the overflow:hidden; CSS property-value pair.
hidden - The overflow is clipped, and the rest of the content will be invisible. scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content. auto - Similar to scroll , but it adds scrollbars only when necessary.
To activate the overflow property enclose the image, within a div of a particular width and height, and set overflow:hidden . This will ensure that the base container will retain its structure, and any image overflow will be hidden behind the container.
DEMO
I think this is what you need ?
Any time when you have two
div's
one inside
the other the first
div needs to be set to relative
and the other
div's need to be set to absolute
position.
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.
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