- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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.
Awesome! I added padding:1px; to the .page and kept the margin-top:30px; as it is. Works perfectly! Thank you very much, Paulie! :)