Grow your CSS skills. Land your dream job.

Elements don’t reposition when browser is resized

  • # January 28, 2013 at 10:37 am

    I’m rying to create a website with only horizontal scrolling. Please take a look at this [demo](http://kode.co.nf/positiondemo/ “demo”). My problem is when I resize the browser, the content(the paragraph inside the light yellow box) doesn’t reposition. I want that paragraph to be positioned above the yellow ring segment. How can I do that?

    Below is my code.

    **HTML**

    {div id=”container”>

    {div id=”info”}
    {p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubia

    **CSS**

    a { text-decoration:none; }

    li {list-style-type:none; }

    body { overflow-y:hidden; }

    #container {
    position:absolute;
    height:100%;
    width:10000px;
    background-color:#FC9;
    }

    #info {
    position:absolute;
    width:200px;
    height:220px;
    background-color:#FFC;
    top:180px;
    left:250px;
    }

    #backimage {
    position:absolute;
    height:100%;
    background-size:cover;
    bottom:0;
    }

    I tried setting #info’s position as relative but when I do that, it disappears from the page.

    Here is a [pen](http://codepen.io/Isuru-Nanayakkara/pen/tfKDI “”). [Full view](http://cdpn.io/tfKDI “”)

    # January 28, 2013 at 10:40 am

    Can you put all this in Codepen?

    I would NOT recommend using any positioning AT ALL unless you are after a specific effect that cannot be achieved using padding, margins or floats.

    >width:10000px;

    This is just horrible.

    # January 28, 2013 at 10:45 am

    I updated my question with a pen. I know. Not my choice either. But I’ve been asked to create a site with only horizontal scrolling.

    # January 28, 2013 at 10:51 am

    I think you need to consider what content will be in the site before deciding on width (or is that just there as a marker).

    The problem is that the background image is likely to expand/contract based on viewport size/browser with and I don’t think you can position the required section in the way you think.

    That background image should be on the body and not a separate div though.

    It’s in the back of my mind that you MIGHT be do something with percentages…ANYONE!?

    http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

    # January 28, 2013 at 1:44 pm

    I’m taking a different approach based on the article you posted. I’ll post back with my progress. Thanks Paulie. :)

    # February 9, 2013 at 3:44 am

    Hi Paulie, I have managed to get the layout done but now stuck with a different issue. I have posted a new question on it [here](https://css-tricks.com/forums/discussion/22474/positioning-elements-in-a-horizontal-layout#Item_1 “”).

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

You must be logged in to reply to this topic.

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