CODEWITHSUNDEEP
jquerycss
kimberlyvoo
kimberlyvoo

Reputation: 197

Trying to make overflow: hidden work

http://jsfiddle.net/kL4o9ffy/3/ you can see how the text that slides in and out from the left is outside of the container. I am trying to fix this.

Is there any change of getting rid of the display:table; on the #right div???

<div class="container">
<div class="main-menu"><a href="#target0" class="panel_main">Main Menu Link</a>
</div> 
<div id="right" id="main">
<div id="target0" class="panel active main_act">This is the Target Menu<br />
    <a href="#target1" class="panel">Target 1</a><br/>
    <a href="#target2" class="panel">Target 2</a><br/>
    <a href="#target3" class="panel">Target 3</a><br/>
</div>
<div class="panel" id="target1">Target 1</div>
<div class="panel" id="target2">Target 2</div>
<div class="panel" id="target3">Target 3</div>
</div></div>

Upvotes: 1

Views: 56

Answers (1)

lmgonzalves
lmgonzalves

Reputation: 6588

I get it working fine adding a wrapper div to #rigth, and set some CSS rules.

<div class="wrapper">
    <div id="right" id="main">
        .........
    </div>
</div>

CSS:

.wrapper{
    width:200px;
    height: 200px;
    overflow: hidden;
}

https://jsfiddle.net/lmgonzalves/kL4o9ffy/6/

Upvotes: 1

Related Questions