The fixed CSS layout allows for the content contained in the layout to be displayed exactly like the designer intended, regardless of the end user's screen resolution. The somewhat standard fixed width is 760 pixels which allows users with 800 by 600 screen resolutions to read the page without any needed scrolling. In addition, fixed width layouts can be much easier to style due to their simplicity.
There are a few drawbacks to fixed CSS layouts. If for some reason a user still has a very low resolution monitor, less than the 800 by 600, they will have a horizontal scroll bar to deal with, but this is fairly uncommon today. If the end user has their font sizes set to very large sizes it can distort the layout as the layout is set in its dimensions and will not resize to accommodate the larger fonts; this could lead to text and content overlapping the borders of the content area.
Using the fixed CSS layout, also called fixed width, simplifies the design process as the designer does not need to account for varying screen resolutions. The layout is used when the content and information of the page is most important; simple pages where the main goal is to provide information and not entertain. Although there are instances where a fixed CSS layout will be favored in other settings.
Example of a fixed width CSS Layout
Liquid or Fluid Layouts
A fluid CSS layout adapts to take advantage of the full screen display of any user's monitor. If care is taken by the designer the layout can work with virtually every screen size and resolution. This layout makes the best use of available screen 'real estate' to provide less scrolling to the end user.
Due to the layout's design and ability to maximize the screen resolution for content, the content itself may become to hard to read. Long lines of text are difficult to follow when reading. This may also lead to too much content; less is more even on the web. Some of the CSS mark up that limits the space used are not supported by all browsers which in some cases may make the page difficult to use and read for some end users and visitors. This layout is best used when needed or for a specific purpose. Basically to allow more users to have a better viewing experience of the site in question.
Example of a fluid CSS layout
Elastic layouts enable the proportional scaling and resizing of all elements in the layout due to using
instead of pixels as the measurement. Using the
allows the user to scale the page using ctrl + mouse wheel to zoom in or out and have all aspects change size in relation to each other.
If the elastic layout is not limited in some way, shape or form it can be a user's nightmare. This is due to the fact that the scaling will have no limit and could continually be enlarged or made smaller with absolutely no benefit. If the elastic layout is the choice of the designer for their project then it must be made to support smaller monitors. Essentially the widths will need to be limited to obtain the best end result for the users. Elastic layouts should be designed with usability and accessibility in mind.
Example of an elastic CSS layout