Overflow hidden doesn't seem to work

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;

}

jsfiddle.net/SAN6n/3 <- fixed.

Alxandr
– Alxandr

2012-04-14 15:39:08 +00:00
Commented Apr 14, 2012 at 15:39 — Alxandr
– Alxandr, Commented Apr 14, 2012 at 15:39

coder · Accepted Answer · 2012-04-14 15:40:23Z

29

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.

answered Apr 14, 2012 at 15:40

coder

13.2k32 gold badges116 silver badges221 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

austincheney · Accepted Answer · 2012-04-14 15:35:25Z

10

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.

answered Apr 14, 2012 at 15:35

austincheney

1012 bronze badges

1 Comment

Eugen Konkov Jan 5 at 2:46

This does not true. Though the element positioned absolute it will be hidden if is behind parents rectangle.

Starx · Accepted Answer · 2012-04-14 15:41:39Z

2

Actually It is working, the padding you gave and the content it has, it making it useless of applying the overflow:hidden;

See this demo to see my point, I have decrease the height, and the overflow:hidden is working.

answered Apr 14, 2012 at 15:41

Starx

79.3k50 gold badges187 silver badges266 bronze badges

1 Comment

user1184100 Over a year ago

Thank you all for your help .. i wanted the overlay div to slide up when there is mouse over the div .. but the overflow hidden is with respect to the main div and the slide up would happen from the border and not w.r.t to div which has class 'boxContent'

Yaron U. · Accepted Answer · 2012-04-14 15:36:30Z

1

when you give your element an absolute position - it can also be placed outside of the div's bounds - therefore - the overflow hidden should not be affecting it

answered Apr 14, 2012 at 15:36

Yaron U.

7,9333 gold badges33 silver badges45 bronze badges

1 Comment

user1184100 Over a year ago

thanks for reply yaron and austincheney.. so i removed position:absolute from txtOverlay class now the content is hidden but now the image is not seen..

Collectives™ on Stack Overflow

Overflow hidden doesn't seem to work

HTML

CSS

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

CSS

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related