Elements don’t reposition when browser is resized

[isuru]

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 “”)

[Paulie_D]

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.

[isuru]

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.

[Paulie_D]

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

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

[isuru]

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

[isuru]

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

[Author]

Posts