Horizontal website navigation - html

Question

I'm currently in planning stage for a site, which needs to scroll horizontally.
The simplest solution I have to tackle this is to go in this direction, JSFiddle.
I'm not sure if this is the best option, as I will have to arrange each div individually i.e. left: 100% left: 200%;.
Is there a way around the divs, with a display: inline-block value auto wrapping to the viewport, so I don't have to arrange each div individually?

Answer 1

Removing the absolute positioning
What you need to do here is remove the float and absolute positioning from your dividers and simply add white-space: nowrap to your body. As your dividers are set to display as inline-block, these get affected by the white-space property.
body {
margin: 0; padding: 0;
white-space: nowrap;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
}
JSFiddle demo.
Removing the spaces between each block
Now that we've removed the floats and the positioning, you'll notice that there is a white space between each divider. If we refer to this CSS Tricks article, we can remove this by simply giving the body a font-size of 0, and giving each divider a font-size of what you're wanting the font size to be within those blocks:
body {
margin: 0; padding: 0;
white-space: nowrap;
font-size:0;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
font-size:16px;
}
Second JSFiddle demo.

Answer 2

http://jsfiddle.net/MsRCS/3/
You can remove the absolute positioning and use float instead.
body {
margin: 0; padding: 0;
width:300%;
}
.full {
width: 33.3%;
height: 100%;
display: inline-block;
float: left;
}
#screen-1 {
background: red;
}
#screen-2 {
background: blue;
}
#screen-3 {
background: yellow;
}