Grow your CSS skills. Land your dream job.

Positioning elements in a horizontal layout

  • # February 9, 2013 at 3:42 am

    I’m creating a horizontal layout for a site. I used the approach described in [this](http://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.

    # February 9, 2013 at 4:32 am

    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.

    # February 9, 2013 at 5:18 am

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".