Positioning elements in a horizontal layout

[isuru]

I’m creating a horizontal layout for a site. I used the approach described in [this](https://css-tricks.com/how-to-create-a-horizontally-scrolling-site/ “”) article to do that. The layout looks good. But I’m facing an issue regarding positioning elements in it.

I’m trying to position a big div on the first pane. Its left and right margins are set to auto to center it. From the top I have set margin-top:30px; This is where the problem is. It doesn’t push down the dive relative to its pane but the whole page leaving a white space strip above. Please see the [demo page](http://kode.co.nf/demo/ “”) I have set up here to get a better understanding. This is not how I want it.

How can I position the yellow div relative to the green page?
[Here](http://codepen.io/Isuru-Nanayakkara/pen/dyKfD “”) is a pen including all the code.

[Paulie_D]

There’s a long explanation for why this happens, it’s just that the margin-top you have applied to #slider-space effectively has nothing to push against so the whole page slides down.

The easiest fix would be to add padding-top: 30px; to your .page class and remove the margin-top from #slider-space.

[isuru]

Awesome! I added padding:1px; to the .page and kept the margin-top:30px; as it is. Works perfectly! Thank you very much, Paulie! :)

[Author]

Posts