Overflow hidden doesn't seem to work
css, html
Solution
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.
Problem
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/ HTML ``` <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> ``` CSS ``` .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; } ```