- This topic is empty.
-
AuthorPosts
-
January 28, 2013 at 10:37 am #42314
isuru
ParticipantI’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 #122581Paulie_D
MemberCan 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 #122582isuru
ParticipantI 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 #122583Paulie_D
MemberI 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/
January 28, 2013 at 1:44 pm #122619isuru
ParticipantI’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 #123864isuru
ParticipantHi 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 “”).
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.