The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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]( “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.


    {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


    a { text-decoration:none; }

    li {list-style-type:none; }

    body { overflow-y:hidden; }

    #container {

    #info {

    #backimage {

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

    Here is a [pen]( “”). [Full view]( “”)

    # 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.


    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!?

    # 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]( “”).

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed