0

I have this this code, http://jsfiddle.net/rnbcoder/WjzbH/

HTML : 

<div class="mframes">
    <div class="mframe" id="liveBand">
            <div class="mframeDetails mfrDetSum" style="background-color: rgba(255,0,0,0.5);">
                    <p>Live Band Performance</p>
                    <p>Stay tuned for more details</p>
                    <div class="mframeBtn" id="leftmframeBtn" style="">Read More</div>
            </div><div class="mframeDetails mfrDetFull" style="left:50%;background-color: green;">
                    <p>This is the main interesting blah blah </p>
            </div>
    </div><div class="mframe" id="dj">
            <div class="mframeDetails mfrDetFull" style="left:0%;background-color: green;">

            </div><div class="mframeDetails mfrDetSum" style="left:50%;background-color: rgba(255,0,0,0.5);">
                <div class="mframeBtn" id="rightmframeBtn" style=""></div>
            </div>
    </div>
</div>

CSS :

.mframes{
    position:  absolute;
    height:70%;
    width:70%;
    margin-top: -18%;
    margin-left: -35%;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    overflow: hidden;
}
.mframe{
    margin: 0;
    height: 100%;
    width: 50%;
    background-color: black;
    overflow: hidden;
}
.mframeDetails{
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 50%;
    text-align: center;
}

.mframe contains divs larger than itself. Its overflow style is set to hidden. Yet it can not trim its children.

What's wrong ?

T J
  • 42,762
  • 13
  • 83
  • 138
rnbguy
  • 1,369
  • 1
  • 10
  • 28
  • There are many `.mframe` elements in your code... which one is exactly overflowing..? – T J Oct 29 '14 at 17:47

1 Answers1

0

remove position: absolute; ? Are you setting the top and left in JS or can they be relative?

It could be from the height and width as % rather than numbers too. I'll play around a little for you.

EDIT: Below, I think I found it.

Remove the line below from this class in the jsfiddle link you posted.

display: inline-block;

.mframe{
    margin: 0;
    height: 100%;
    width: 50%;
    background-color: black;
    overflow: hidden;
}

http://jsfiddle.net/WjzbH/9/

To set and height and width make sure you are display:block, then overflow can be applied =)

Does height and width not apply to span?

Community
  • 1
  • 1
Beau
  • 73
  • 5
  • Actually height and width would not effect this issue because absolute will hold the space even if it is hidden I think. – CMS_95 Oct 29 '14 at 17:52