Menu
I'm trying to position a DIV off the screen so that I can use JQuery Animations to "slide" multiple DIVs on\off the screen (horizontally)... However I'm having trouble positioning the 2nd DIV as it's creating scroll bars even though it has a negative top margin.
All elements are positioned relatively (and maybe that's my problem?). The 1st main DIV that is being slid off is positioned in the center with margin:auto and has a top offset to help center it vertically as well.
The 2nd DIV has right:5000 to move it off screen. but since it's in normal flow it still causes vertical scroll bars, even with top:-10000 I've tried overflow:hidden with no luck, not sure what else to do. (I don't want to completely disable scroll bars in case the dynamic content grows).
Sample CSS
#maincontent {
position: relative;
width: 100px;
height: 250px;
margin: auto;
top: 100px;
background-color:black;
}
#maincontent2 {
position: relative;
width: 100px;
height: 250px;
margin: auto;
background-color:blue;
top: -1000px
}
body{
position:relative;
}
Sample HTML
<body>
<div id="maincontent"></div>
<div id="maincontent2"></div>
</body>
Here's a JSFiddle with a dumbed down version of what I'm working with. Sample JS Fiddle
This seems like it should be extremely simple but maybe I'be been working too long on this today and have overlooked something when searching.
BONUS If anyone has suggestions for another way to make this happen (DIVs sliding off screen and another one taking it's place) that works too!
707
It's Very simple Just add
body {
overflow-x: hidden;
}
Or
Add a Parent level div and Write overflow-x:hidden to that div
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
