Question

I’m sorry if the question’s title doesn’t really make sense but it’s a problem sort of difficult to describe with words when English is not your first language. The best way would be to show what I mean by a fiddle.

jsFiddle – problem

In this example I have a container div with overflow: hidden and some top padding. The relatively positioned div with content class in the project is scrolled by jQuery, but it’s not relevant now. Let’s say that the example shows a situation where the content has been scrolled down a little.

The div has moved upward and sadly the content “ignores” the container’s padding, which is correct and expected html behaviour. However in this case I have to “prevent the padding from disappearing”. The html structure must remain the same – the content div must be directly inside the container.

I came up with a solution using another div posing as “padding” by using absolute positioning and z-index.

jsFiddle – solution?

My question – is there a prettier way to achieve this result?

Answer 1

The only improvement I’d suggest is from a visual/design perspective:

Instead of having the solid white #fff in your mask class, perhaps an image with a gradient from transparent to background colour (white, in your case), so the text looks like it’s going behind something rather than just getting “cut off”.

Have uploaded a fiddle here: http://jsfiddle.net/kdFgn/30/