One of the first, and often overlooked, elements to decide upon when
building a CSS-based website is the type of CSS layout you plan on
using. Wait… There is more than one type of CSS layout? Yep, in fact
there are 4 primary CSS layout types.
Each CSS layout is based on a different methodology and serves a
different purpose. As a whole, the different types of CSS layouts
provide added flexibility when designing websites.
Let’s take a look at each CSS layout, define the
advantages and disadvantages of each, and review various examples so you can determine which type of CSS layout is best for you.
1. Fixed Width
Fixed
CSS layouts
are simply layouts that have a definite width specified in pixels.
Furthermore, the size of the layout does not resize based on the size of
the browser or the site visitor’s browser text settings.
Advantages
- The layout or column is controlled (stays the same) which can be
helpful to ensure your content remains easily read even when the browser
window is shrunk or expanded.
- In some cases specific designs can be more easily achieved without having to make accommodations for a layout that re-sizes.
Disadvantages
- Oftentimes the layout size must be kept to a minimum to accommodate
for smaller or low resolution computer screens. If you choose a large
fixed width CSS layout visitors may have to scroll horizontally to read
content.
- With a set width you may not be taking advantage of the real estate
larger or higher resolution screens provide. Additionally, your site
may look tiny to visitors with these types of screens.
- The content area may become awkward looking and hard to read if the
visitor has their browser text size set larger than “normal” as this
type of layout cannot easily accommodate for this scenario.
Example: WebAssist.com
2. Liquid or Fluid
A liquid CSS layout, otherwise know as a fluid layout, is one where
the layout width is specified as a percentage of the site visitor’s
browser width. Therefore, the design will adapt or change if the site
visitor adjusts the size of their browser to be narrower or wider. The
width will not change based on the site visitor’s text settings.
Advantages
- Will help ensure the width of your site is proportionate to the
size of your site visitor’s browser – universal as it will adapt to all
screen sizes.
- Allows your site to maximize the amount of real estate available within each site visitor’s browser.
- You can set a max width CSS property to ensure your layout does not grow too large.
Disadvantages
- If a layout is stretched the content areas will stretch and cause
paragraphs of text to lengthen to one line making it less readable.
- Some older browsers such as IE 6 do not support a max width CSS
property so in some larger screens your site’s width may grow too large
making content hard to read.
Example: Google News
3. Elastic
With an elastic CSS layout the layout width is specified as a unit of
measurement (ems) relative to the size of the text set by the site
visitor in their browser. The layout will adapt if the site visitor
changes their text settings, however the layout will not change based on
the size of the browser window.
Advantages
- Site layout will grow proportionately with size of the text site
visitors have set in their browsers. This can help ensure your content
stays readable.
Disadvantages
- If a browser’s text display settings are set too large your site may become unusable.
Example: Whitley Journalism
Note: To test the elasticity of this example you will need to set your browser text settings to a larger font size.
4. Hybrid
As you may have guessed a hybrid layout is any combination of CSS
layout types mentioned above. For example, in a two-column hybrid, the
right sidebar layout can have a liquid main column that scales to the
size of the browser, and an elastic column on the right that scales to
the size of the site visitor’s text settings.
Advantages
- You can combine multiple benefits of the various layout types mentioned above.
Disadvantages
- This type of layout can become difficult to implement as there are more variables.
Example: Amazon.com
Note: As you stretch the Amazon.com home page the right and left columns
will remain fixed, while the center column is liquid and stretches as
you increase the size of your browser.
As you can see each type of layout will provide you with various
advantages and disadvantages. Hopefully through the information provided
in this article you can better select the layout type that will fit
your next project. Looking to more easily design CSS layouts within
Dreamweaver? Check out
Eric Meyer’s CSS Sculptor our which will help you design each of the above layout types without CSS knowledge or experience.
