Absolute positioned elements inside overflow-hidden parents

HTML & CSS
1

I have a div that is set to overflow:hidden which is what I want; but nested a couple levels inside I have a drop down menu that is absolute positioned. Yet whenever it drops outside the parent that is overflow:hidden it hides the overflow. I understand why this is happening but I want the absolute positioned element to be able to overflow, but nothing else. Is there a way to do this?

Thanks!!!

2

Is the parent div with overflow:hidden relatively positioned/absolutely positioned too? Can we see some code? Which browser is this happening in? IE?

3

Is there a way to do this?

Not really:)

IE has some bugs that you could probably exploit but in essence nothing should show outside the confines of that overflow container (see post#9 as this is not quite true).

You will need to re-think the design or the reason for the overflow. Why do you need the overflow:hidden?

4

Thanks,

The overflow:hidden is for firefox, I am not sure why but my background image for my div only shows up in firefox when I set overlfow:hidden.

Thats the only reason I need overflow hidden, if there is a different fix for that, that would be good.

Thanks!

5

Are you using the overflow to contain floats? If so you could use a clearfix and trigger hasLayout for IE. But as Paul noted, I’ve ran into some bugs where things such as sibling floated elements prevent the first child sibling which is AP’d from being shown, just odd bugs.

Edit: So it does seem like you’re using it for containing floats. Remove the overflow and try:

el:after { content:"."; clear:both; display:block; visibility:hidden; height:0; }

And make sure it has a width/height to trigger haslayout to contain floats in MSIE

6

As soulscratch said you just need another float clearing technique like shown above :slight_smile:

Overflow:hidden is fine for clearing floats but only when you don’t want anything to poke out of that container.

7

Not sure I follow exactly what you mean, I added the line you offered exactly as you typed it but did nothing, so I figured I was supposed to replace the “el” with the element that previously had the overlow:hidden which I did like this:

#nav_search:after { content:"."; clear:both; display:block; visibility:hidden; height:0; }

Doesn’t seem to be doing anything though.

Thanks

8

Yeah, if I just add

<div style="clear:both"></div>

after it, it works!

thanks!

9

It should have worked but we’d need to see the html to see where you are going wrong.

I also need to clarify my statement about elements not appearing outside of containers that have overflow:hidden applied. If the element with overflow:hidden applied is not positioned then an absolutely placed child element will appear outside of the overflow:hidden div.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#outer {
    position:relative;
}
.test {
    background:red;
    height:100px;
    overflow:hidden;
}
.abs {
    position:absolute;
    background:blue;
    height:500px;
    width:200px;
    top:100px;
    left:100px;
}
</style>
</head>
<body>
<div class="outer">
    <div class="test">
        <p>outer</p>
        <div class="abs">
            <p>Testing</p>
        </div>
    </div>
</div>
</body>
</html>