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:

...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 <ul> list with some <li> elements like these:

HTML code could be something like the following code:

</ul>
</div>

You can add other sections simply adding a new <li> 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 <head> tag of your page:

...and anchor tags into each <li> element:

HTML code could be something like the following:

<li >
<a name="p1" id="p1"></a>
Starting Box
</li>
<li >
<a name="p2" id="p2"></a>
Box 2
</li>


<li >...</li>

<li >
<a name="p10" id="p10"></a>
Ending Box
</li>

</ul>
</div>

Now add this layer with 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:

<a href="#p1">Go to the section 1</a> |
<a href="#p2">Go to the section 2</a> |
<a href="#p3">Go to the section 3</a> |
<a href="#p4">Go to the section 4</a> |
...

That's all! Download the source code ready to use in your web projects and take a look at this essential live preview: