CSS-Tricks PSD to HTML: You Design - We XHTML

New Screencast: Fixed Width, Fluid Width, Elastic Width

I’m sure most of you know the difference between these types of layouts, but I wanted to touch on it a bit anyway.

There are three different types of layouts for websites: Fixed Width, Fluid Width, and Elastic Width. In this screencast we look at all these three varieties of sites out on the web as well as some hybrid sites and other techniques for making use of wider browser windows. True “fixed width” sites will be a thing of the past when the modern browsers of today take hold in greater numbers. Opera 9, Firefox 3, and IE 8 all have “zoom” abilities, which make fixed width sites behave like elastic width sites. At the end of the screencast I show a very simple example of you you can get started with all three types.

screencast-10-thumb.jpg


Theoretically Related Articles:


Responses


  1. 1

    Gravatar

    Really good Screencast Chris. I knew this already but it was still worth watching. Keep up the good work.


    Comment by Ryan Downie — March 21, 2008 @ 3:16 pm

  2. 2

    Gravatar

    Thanks for the video! I’m in the process of learning CSS (to get away from table-based layouts) and this video really helped to clear things up for me!

    Good work!
    David


    Comment by David — March 21, 2008 @ 5:33 pm

  3. 3

    Gravatar

    If someone wants to understand different layouts, for him or her this video is a great time saver.


    Comment by Volkan Görgülü — March 22, 2008 @ 2:25 pm

  4. 4

    Gravatar

    A few weeks ago I saw an Elastic width example-site for the first time and I was very surprised and excited about the effect! I really love it and I think I will start to use it much from now one :)


    Comment by Edwin — March 31, 2008 @ 2:24 am


Leave a comment

Sick of typing in all this info everytime you comment? Register or Login and save yourself time!

LINKS: You can use <a href="">LINK</a> tags here.
CODE SAMPLES: Please wrap code samples in BOTH <pre> and <code> tags.

Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.