Question

My website http://dekomkommertijd.nl has a banner with moving clouds that I made with CSS animated (moving) div’s. They enter left and when they leave the screen at the right side they create a horizontal scrollbar. Everything works as I want to, except I don’t want the scrollbar, except for the content within my content div (canvas – with a width of 960px). Everything outside should be without a horizontal scrollbar and just leave the screen.

I tried several methods I found (mostly for static divs) but they don’t work for my moving divs.

anybody knows how to fix this?

thanks.
Rick

Answer 1

The way you’ve described it suggests to me that you’d want your clouds and other content to overflow in different ways. The overflow is determined by the parent, so to handle the overflow differently you’d need to have two parents: one for the clouds, and one for the content.

If you choose to do it this way, setting the cloud parent to absolute positioning would take it out of the normal document flow so it doesn’t interfere with the rest of your content. And setting the overflow makes it behave as you’d like.

width: 100%; /* Spans the whole document */
overflow-x: hidden; /* Hides overflow instead of displaying it */
position: absolute;
top: 0; left: 0;

Another solution would be handling the overflow identically for your clouds and other content. If you do it this way, you could just set it to be hidden on a mutual parent element, like the body.

This second solution might make more sense, as it’s 1. simpler and 2. unlikely that you’ll have anything other than the clouds overflowing.