Question

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;

}​

Answer 1

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.