Automatically switch horizontal / vertical design with CSS (w/o JavaScript)?

Question

I want to create a mobile version of my website (web community). When I started I just noticed the issue, that positioning of display elements should be different for horizontal vs. vertical screens. And it should even (if possible) switch, if the device is turned around. The intent is to write a normal web page (HTML, CSS, JavaScript) while avoiding the need of JavaScript, if possible

For Android Apps (UI-Thread) you usually can put two layouts in your source code... is there something similar available for CSS?

What answers do I expect?

1. Some CSS examples how to do that, if possible.
2. Additional: Some handy tutorials for creating mobile versions of existing pages, which you think that the're helpful (but: main focus is on screen horizontal/vertical)...

Answer 1

Seems I found the answer myself after "tagging" and therefore finding the right search terms:

http://www.mollerus.net/tom/blog/2010/04/screen-orientation_and_css.html

Either link different CSS files:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

Or put CSS like this in the style sheet:

@media all and (orientation:landscape) { [styles for landscape orientation] } @media all and (orientation:portrait) { [styles for portrait orientation] } 

Answer 2

What you're looking for is 'responsive web design'. This allows you inside your css - to detect layout, trigger javascript events when layout changes, and position your CSS elements based on width/height of the screen.

I can recommend this slide deck as a good starting point: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/