Elastic layouts

Sat, Jun 10, 2006 @ 10:49 am5 Comments

Prompted by a comment from Mike Cherim of Accessites in answer to my post on Zoom Layouts, this post is to list Elastic Layouts.

Elastic layouts are those where the whole layout scales proportionally as the user resizes the text in their browser. They are slightly different from fluid layouts which also display a similar degree of flexibililty: fluid layouts tend to occupy the whole of the window with elements resizing proportionally within the frame, whereas elastic designs tend to occupy a space smaller than what is available and the whole thing ‘zooms’ up.

As such, I felt the links Mike provided on the Zoom Layouts post actually were more appropriate here. So here they are. As before, feel free to suggest any others you might know of.

• Elastic Lawn
• Accessites
• GBXHOnline
• Mike Cherim’s Zen Garden submission
• Autistic Cuckoo
• Edward Eliot
• KuraFire Network
• Nick Cowie

Browse by tags:

Tags: CSS, elastic, HTML, layouts

Posted in: CSS

Subscribe to this site for regular updates

5 responses to Elastic layouts. Add your own.

Comments

1. 1

   Mike Cherim | June 10th, 2006 at 12:21 pm

   Although his blog isn’t active, Tommy Olsson’s Autistic Cuckoo was the first elastic site I ever saw. It blew me away.

Pingbacks

1. 1

   Richard@Home » Blog Archive » links for 2006-06-13 | June 13th, 2006 at 4:19 pm

   [...] Elastic layouts — Tyssen Design A good roundup of some examples of em based layouts (tags: css elastic em layout) [...]

2. 2

   Lucky bag::blog | March 12th, 2007 at 12:16 pm

   一行あたりの文字数を制限する elastic layout （エラステックレイアウト） - 2xup.org TRANS - 2xupで実装されているエラステックレイアウトを調べてみた。 また、Elastic layouts ― Tyssen Design では、elastic レイアウトを採用しているサイトがいくつか紹介されているんで見てみると良いかもしれない。ちなみに、そのサイトも elastic レイアウト。

3. 3

   はてなブックマーク - COLLECTION & COPY | March 13th, 2007 at 6:29 pm

   firefox JavaScript opera [IMG ]詳細 8 users 追加日 2007年03月13日 [3][JAVASCRIPT]クライアントマシンにインストールされているフォントを取得、幅/高さで判定 Elastic layouts — Tyssen Design ドメイン http://www.tyssendesign.com.au [IMG ]カテゴリ 一般 [IMG ]詳細 2 users 追加日 2007年03月13日 [5][DESIGN][HTML][CSS]エラスティック/リキッド、レイアウト、まとめ、サンプル

4. 4

   Website Building Resources | February 7th, 2008 at 3:12 pm

   [...] http://www.tyssendesign.com.au/articles/css/elastic-layouts/ [...]