CODEWITHSUNDEEP
jqueryhtmlcss
Lucas Haas
Lucas Haas

Reputation: 341

move a div inside another without exceed width

I'll create a js effect that moves a 100% div to the right, inside a 100% div.

To explain better: Imagine a div with 1000px of width and 500px of height. Inside this div, we have another div with this same size. But, this should slide to the right, to show a menu.

here is my css and html code:

.mainview { width: 500px; height: 1000px; border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; background: #fff; -webkit-box-shadow: 0 0 8px 2px rgba(0,0,0,0.1); box-shadow: 0 0 8px 2px rgba(0,0,0,0.1);  border: 1px solid #ccc; margin: 20px auto;}


.foreground { display: block; position: relative; z-index: 990; width: 100%; height: 100vh; background: rgba(0,0,0,0.3); left:200px  }



<div class="mainview">

<div class="foreground">
this black area will slide to the right --->
</div><!-- @end of foreground  -->


</div><!-- @end of mainview -->

Here the JsFiddle file http://jsfiddle.net/ZTmFY/

On the example, the div is moved to the left the way I want, but exceed the limit of the div. I want that the extra width side, keeps hidden, like the attached example I want to hide the extra space when the div slides to the right

Upvotes: 1

Views: 369

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Set the css property overflow as hidden for the element with the class mainview

DEMO

Upvotes: 1

Related Questions