Phone: 0113 284 3668

Resources > Liquid layouts

Liquid layouts - resize to fit your monitor

It is a perennial problem for web designers - creating a design that will look good across all platforms, browsers, monitor sizes, screen resolutions and type size preferences.

One answer is to create a design for the lowest possible denominator. These designs are most common, usually about 780 pixels wide with great big blank columns – if you view them on a larger monitor.

Another answer, which is still quite new, is a liquid layout. That is to say that non of the dimensions are fixed, and the layout resizes itself proportionally to fill the screen of every monitor. For example:

Liquid layout 1024 pixels wide

1024 pixels width

Liquid layout 800 pixels wide

800 pixels width

Screen Resolution Popularity

Greater than 1024 pixels – 26%

1024 X 768 pixels – 54%

800 X 600 pixels – 14%

Unknown – 6%

Source W3C Schools May 2000

Northstar web design