- What will you use for a webpage layout? Percentage or pixels?
- When should one use one over the other?
What unit you use depends entirely on what you want to accomplish. The units most used in web layouts are:
- px - absolute; one pixel
- pt - absolute; 1/72 inch, about 1.3px for screen media
- em - relative to parent font size; 1.0em = size of a character (width of uppercase M)
- % - relative to parent
You use px for sizes that remain constant, for example a 1px border.
You use em for sizes that should follow the font size, for example a 3.0em margin.
You use % for sizes that should take up a percentage of the parent, for example a 50% width.
For web page layouts you normally use either pixels or percentages depending on if you want a fixed (pixel) layout or a fluid (percentage) based layout.
I tend to use pixels for width declarations (which generally are fixed), but em's for height. That way the layout resizes vertically - but maintains horizontal consistency.
I use relative / proportionate sizes whenever possible. I find it makes it much easier to make changes to layouts later. Also, using a size relative to a parent element means a change to the parent easily trickles down.
Traditionally, using relative sizes also allowed pages to look correct in various resolutions and was especially beneficial for browser zooming or minimum font sizes. But modern browsers now handle resizing extremely well with pixel-specific layouts, even enlarging images as necessary. So it's become less important to use relative sizes.