Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overflow hidden doesn't seem to work

Tags:

html

css

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;

}​
like image 696
user1184100 Avatar asked Apr 14 '12 15:04

user1184100


People also ask

How do I hide content of overflow?

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.

What happens if we use overflow hidden?

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.

How do I make an image overflow hidden?

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.


2 Answers

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.

like image 97
coder Avatar answered Oct 13 '22 05:10

coder


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.

like image 25
austincheney Avatar answered Oct 13 '22 05:10

austincheney