CODEWITHSUNDEEP
htmlcss
Steven_Harris_
Steven_Harris_

Reputation: 1131

Horizontal website navigation

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?

Upvotes: 0

Views: 67

Answers (2)

James Donnelly
James Donnelly

Reputation: 128856

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.

Upvotes: 3

cwhy
cwhy

Reputation: 56

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;
}

Upvotes: 0

Related Questions