This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Sunday, February 1, 2009

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:

<div id="container">...</div>

...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:

<div id="container">
<ul id=
"maincontent">
<li >Box 1</li>
<li >Box 2</li>
<li >Box 3</li>
<li >Box 4</li>
<li >Box ...</li>
</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:

<script type="text/javascript" src="thw.js"></script>

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



HTML code could be something like the following:

<div id="container">
<ul id=
"maincontent">
<li >
<a name="p1" id="p1"></a>
Starting Box
</li>

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


<!-- Add all boxes you want-->
<li >...</li>

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


Now add this layer with scroll buttons:

<div id="scroll-buttons"></div>

...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:

Download this tutorial Live preview


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

- shn.me - Innovation make creativity
- hasrimy.com - A professional web designer
- Dean Oakley - Freelance web designer

blog comments powered by Disqus
Netwala said...

Another helpful post! How can I increase the speed of scroll? The live preview looks looks a bit slow while scrolling.

Thanks again!

Nabeeha Khan said...

This is really amazing Antonio.. This gives me a lot more ideas that i can do with my design.. But my design is the simplest you can find on blogs.

http://vnoma.blogspot.com

raulriera said...

I wonder what software do you use for prototyping, I really like the look of them

Sérgio Soares said...

well done
Another great article
cheers from Portugal

zoel said...

great tips!, maybe if it integrated with jquery or moo it will so dynamic like slider effect, wow so cute...;-)

EterniCode said...

Interesting idea, but why do you use a table for your live demo's layout?

Netwala, the scroll speed is controlled by variables set in the JS. To modify it on the live demo, go to the page and enter this into your address bar:

javascript:HtinyScrolling['speed']=10;document.void();

Changing "10" to lower numbers increases the speed, higher numbers decrease the speed.

Antonio Lupetti said...

@raulriera I used PowerPoint :)

izzat aziz said...

good tutorial, but i never think to create horizontal layout.. can't find the purpose though.. :D

Anonymous said...

I use a horizontal layout. buttonbeats.com I set the left and righr margin to 0 and made the table in the middle 100 percent width. I like the look of the horizontal layout. It looks good in whatever size browser window.

Sandeep Sharma said...

very helpful post...

Anonymous said...

[quote]
Anonymous said...
I use a horizontal layout. buttonbeats.com I set the left and righr margin to 0 and made the table in the middle 100 percent width. I like the look of the horizontal layout. It looks good in whatever size browser window.

February 1, 2009 2:55 PM
[/quote]

ermm.. i think you missed the point... try reading the tutorial ;-)


btw great tutorial!

Anonymous said...

Good post! A couple of friendly suggestions:

1. Use DIVs instead of tables for the layout.

2. The navigation breaks the Back button. I'd go with a similar approach to the Coda Slider and keep the sliding elements within a DIV.

@izzat aziz:
Horizontal layouts can be very useful and an attractive way to design a site. It lends itself well to static content sites rather than web apps.

Tulsi Dharmarajan said...

Love your blog! You always post excellent, useful stuff!

Gray said...

i've also been developing a horizontal layout CSS, gonna try your way soon as it seems (like mine) not to require a ridiculous width for < body >.

what do you recon is the minimum height we must design for? (don't start screaming "the fold"!)

hasrimy said...

Thanks for list down my site as an example!

www.hasrimy.com

web design said...

Wow! great tips! thanks for sharing!

Andy said...

Really a great article... Amazing explanation with diagrams.. Thanks for sharing...
web design gold coast

leandro said...

Wow. That's what I was looking for. Vladimir Carrer reccomend you. Thanks for sharing. Cheers from Venice.

st louis web design said...

thanks for the post! will be back to read more. I can't believe this info is free.

biz-R said...

This is cool.

Is it possible to use the page anchors to indicate on the menu what "page" or "section" you are in?

E.g if the the menu items were buttons, use css to indicate one underlined or whatever.

Victoria said...

Thanks for this! You have very good tips and suggestions

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News