#10: Fixed Width, Fluid Width & Elastic Width

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 on getting started with all three types.

Comments

  1. User Avatar
    Justin
    Permalink to comment#

    i am trying to set an absolute width for my site so that when you view a group on a monitor with WIDE resolution the viewer won’t see the strip of color on the right…any ideas?

  2. User Avatar
    Adam
    Permalink to comment#

    Look at using a background image that can fade/blend into a colored bg. Simple fix, but not sure if that will ruin your design.

  3. User Avatar
    alpio
    Permalink to comment#

    great video!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag