Useful tips to design horizontal website layout

In the past weeks I received some messages from my readers which asked to me to dedicate a post about horizontal website layout. So in this tutorial I want to illustrate some useful tips to design this kind of layouts using CSS and HTML code, also adding a nice animated scrolling effect using JavaScript.

A little introduction: Normally websites have a vertical structure with a fixed width and a variable height which depends from the lenght of the content you have within the main layer:

The structure of an horizontal layout is a little bit different respect the previous one: it has a fixed height and a variable (or fixed) width, for example:

How you can do that? It's very simple: create a container layer like this:

"container">...

...and define its layout using CSS code in the following way (choosing an appropriate width and height):

#container{

width:3000px;
height:400px;

}

Now, within the layer #container, create some sections to add the content. You can use a simple

list with some
elements like these:

HTML code could be something like the following code:
"container">
"maincontent">
>Box 1
>Box 2
>Box 3
>Box 4
>Box ...
You can add other sections simply adding a new
element into the list. The related CSS code is:
#maincontent{
border:0; margin:0; padding:0;
}
#maincontent li{
line-style:none; width:240px; height:380px; padding:10px; float:left; }
Background with fixed position: If you want to add a background picture which doesn't scroll with the main content remember to use a fixed position attribute in your CSS code. For example, if you don't use position:fixed the result, scrolling horizontally the page, will be like this:

But if you use position:fixed your background will remain in the same position on the browser window:

CSS code is something like this:
body{
background:url(mybg.jpg) no-repeat fixed;
}
Animated scrolling: If you want to use an horizontal layout for your website you can add this nice feature to scroll automatically in horizontal your page in a specific position (take a look at this example). How you can see in the previous example, each link send the user to a specific section with a nice animated effect. To implement this effect I suggest you to try Marco Rosella's Horizontal Tiny Scrolling a very useful script to implement animated horizontal scrolling effect. The only thing you have to do is to add this script in the tag of your page:
...and anchor tags into each
element:

HTML code could be something like the following:
"container">
"maincontent">
> "p1" id="p1"> Starting Box
> "p2" id="p2"> Box 2
>...
> "p10" id="p10"> Ending Box
Now add this layer with scroll buttons:
"scroll-buttons">
...and use this CSS code to fix its position on the browser windows:
#scroll-buttons{position:fixed;}
Add the following links to scroll the page to a specific position:
"#p1">Go to the section 1 | "#p2">Go to the section 2 | "#p3">Go to the section 3 | "#p4">Go to the section 4 | ...
That's all! Download the source code ready to use in your web projects and take a look at this essential live preview: Download this tutorial Live preview

Horizontal scrolling websites Showcase

Take a look at these horizontal scrolling websites to take inspiration: