====== Web Page Layout ======

  * [[http://de.selfhtml.org/css/layouts/einfuehrung.htm|Einführung in CSS-basierte Layouts]]
  * [[http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout|Grundlagen für Spaltenlayout mit CSS]].
  * [[http://www.webreference.com/programming/css_frames|How to Create a Frames Layout with CSS]].

  * [[http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp|One clean HTML markup, many layouts...]]

==== Liquid Layout ====

  * [[http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths|Ultimate multi-column liquid layouts]]
  * [[http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm|The Perfect 'Right Menu' 2 Column Liquid Layout]]

==== Cross Browser Layout ====

  * [[http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks|Equal Height Columns with Cross-Browser CSS & No Hacks]]

==== Cross Platform Layout ====

  * [[https://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign|Finally, a fluid Hicksdesign]]
  * [[http://app-entwickler-verzeichnis.de/programmierung/26-mobile-apps/303-responsive-design-optimierung-webdesign-smartphones-tablets|Responsive Design - Webseiten für Smartphones und Tablets optimieren]]
  * [[https://www.heise.de/ix/artikel/Allen-recht-1058764.html|Media Queries von CSS3]]

===== Examples =====

  * [[http://annevankesteren.nl/2004/07/fixed-positioning|Fixed positioning]]
  * [[http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page|How to keep footers at the bottom of the page]]
  * [[http://www.thesitewizard.com/css/design-2-column-layout.shtml|How to Design a Two Column Layout for Your Website Using CSS]]
  * [[http://www.dynamicdrive.com/style/layouts/|Dynamic Drive CSS Layouts]]

Taken from the [[http://css.maxdesign.com.au/floatutorial/|maxdesign − Floatutorial]] -- Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.


  * [[http://css.maxdesign.com.au/floatutorial/tutorial0801.htm|Tutorial 8 - Liquid two column layout]]
  * [[http://css.maxdesign.com.au/floatutorial/tutorial0901.htm|Tutorial 9 - Liquid three column layout]]

Taken from [[http://www.cssplay.co.uk|Stu Nicholls' CSSplay]] site...

  * [[http://www.cssplay.co.uk/layouts/fixit.html|Layout 1]] -- Cross browser fixed header/footer layout. One column, no left/right navigation. A detailed tutorial on how it works can be found [[http://www.webreference.com/programming/css_frames|here]].
  * [[http://www.cssplay.co.uk/layouts/body2.html|Layout 2]] -- Full width and height. Fixed header, footer and left navigation. For the bare essentials look [[http://www.cssplay.co.uk/layouts/basics2.html|here]].
  * [[http://www.cssplay.co.uk/layouts/body4.html|Layout 3]] -- Ditto with content only scrollbar. Essentials [[http://www.cssplay.co.uk/layouts/basics.html|here]].
  * [[http://www.cssplay.co.uk/layouts/body5.html|Layout 4]] -- Full height, fixed header and footer, multiple scrolling columns.

Another example from [[http://de.selfhtml.org|SELFHTML]]...

  * [[http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm|Layout 5]] -- Fixed header, footer and navigation. The essentials come [[http://aktuell.de.selfhtml.org/artikel/css/footer/#header_footer_feststehend|here]].

  * [[http://www.zap.org.au/documents/styles/sinorcaish/example/index.html|The Sinorcaish Stylesheet v1.3]]
  * [[http://www.zap.org.au/documents/styles/sinorcaish/|Index of /documents/styles/sinorcaish]]

===== Templates =====

  * [[http://www.oswd.org|Open Source Web Design]] - Homepage Templates.
  * [[http://www.on-mouseover.de/templates|Homepage Vorlagen]] - zum Download und Ansehen.