Question

I’ve got a DIV with a single child DIV that may or may not overflow on multiple sides of its parent. I need to be able to hide any part of the child that overflows the bottom edge of the parent, but allow for overflow on all other sides.

Here’s a graphic to help explain:

I’ve been looking at the clip CSS property but haven’t been able to beat it into submission, largely because it doesn’t accept percentages and this child doesn’t have a static height/width. In addition, when hovering over the parent the child will animate, moving from one position to another. Makes things a bit trickier.

Suggestions?

NOTE
My goal is to not add extraneous markup for styling purposes. This particular site must be solid on a semantic level, as it’s for a large school, so adding extra wrapper divs to make this happen is less than ideal.

Answer 1

If you can use one more parent div, I could achieve similar results using following.

The CSS:

    #grandparent{
        overflow: hidden
    }
    #parent {
        background-color: #600;
        width: 200px;
        height: 200px;
        padding-top: 30px;
        text-align: center;
        margin: 0 auto;
        position: relative
    }
    #child {
        background-color: #090;
        width: 100%;
        height: 300px;
        margin: 0 auto;
        position: absolute;
        padding: 0 1.5em;
        margin-left: -1.5em;
    }

The markup:

    <div id="grandparent">
      <div id="parent">
         <div id="child">Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum</div>
      </div>
    </div>