Saturday, September 12, 2009

How to create liquid layouts in CSS

I have been using the text Learning Web Design to get a better grasp of what is required to build my website. I have been reading how to create liquid layouts which is the way I want to go. Nierderst Robbins (2007, p. 312) notes the advantages and disadvantages of liquid page design:

Advantages
  1. You don't have to monitor for a specific monitor resolution.
  2. You avoid potentially awkward empty space because the text fills the window.
  3. Liquid pages keep with the spirit and nature of the medium.
Disadvantages
  1. On large monitors, line lengths can get very long and uncomfortable to read.
  2. They are less predictable . Elements may spread out or too cramped at extreme browser dimensions.
I think that the advantages outweigh the disadvantages and have decieded to go with this option. Nierderst Robbins (2007, p.313) goes on to explain that you even if you use a fixed width for one column this is still considered liquid layout. She also talks about liquid layout using percentages and an example of this code follows:

div#main {
width: 70%;
margin=right: 5%;
float: left;
background: yellow;
}

div#extras {
width: 25%;
float: left;
background: orange;
}

This has helped me to understand how to position style in the sheet and apply it to my own web design.

No comments:

Post a Comment