Setting overflow:hidden only for certain elements

http://jsfiddle.net/waitinforatrain/sEX3n/

I have two divs in a container with absolute position. Both of them are set to be outside the boundaries of the container. If I uncomment the overflow: hidden line it will hide everything outside the container.

However, I only want div1's overflow to be hidden, and div2's to be visible. But because overflow:hidden has to be set in the parent, it will hide both of them. Is there any way to hide one?

Even if I could get it so that it shows overflow at the top and bottom boundaries but not at left and right that would suit (I tried messing with overflow-x and overflow-y but I gather that that's not their intended purpose).

<div id="container"> 
    <div id="div1"></div> 
    <div id="div2">Test</div> 
</div> 

#container {
    width: 300px;
 开发者_开发百科   position: relative;
    border: 1px solid #000;
    height: 10px;
    /*overflow: hidden;*/
}

#div2 {
    position: absolute;
    top: 16px;
    border: 1px solid #444;
}

#div1 {
    position: absolute;
    height: 10px;
    left: 90%;
    width: 15%;
    background-color: purple;
}

The most obvious solution is to:

• Add an extra wrapper div.
• Apply overflow: hidden to this div.
• Move the time outside this div.

Like this: http://jsfiddle.net/sEX3n/4/

Why not just move div#time outside the div#video-seek ?

Like this : http://jsfiddle.net/moeishaa/XNAmn/