Web Layouts: pixels vs percentages

Question

What are the use cases for defining distances in a web layout for pixels and percentages?

Is there any downside to using pixels with respect to multiple resolutions? Will they scale correctly?

Answer 1

For percentages you have to have a base value, so it would be something like an image that has a size set outside of the CSS, if you just use a percentage on a DIV, for example, it wouldn't have anything to base that off of except the actual size it was by its being filled with text, for example, so it would not be practical to use percentages as a way to size it as it would rarely produce the desired output, if you are re-sizing something with a pixel size, such as by using javascript, you could resize by a percentage that would resize the original value (in pixels)

Answer 2

I'll reply to this one by telling you a true story.

We had a client which wanted a map view, made up of divs.

Suddenly, he decided he wanted zooming as well.

I had to change all those fine-grained pixel positions to percentages.

Causing the wrapping div to change width/height (in pixels) relatively, we got a nice and reasonable zooming effect.

NB: During design phase, I quickly drew up a prototype, I'm going to look it up for you...

Edit: Nope, nothing found, sorry.

Answer 3

They do different things.

Pixel values always relate to hypothetical pixels on the output device. Percent values relate to the computed size of the containing block (for block elements) or the containing block's font size (for font sizes). Em and pt values relate to the current font size.

If you want your item to scale with its container, use percentages. If you want it to scale with font size, use ems. If you don't want it to scale at all, use pixels.

And then there's IE6; whoever 'implemented' CSS in that thing obviously had no idea what the various CSS properties were supposed to do.

Answer 4

Be careful using percentages, webkit browsers don't calculate percentages correctly. It's all because webkit doesn't calculate subpixels correct.

Detailed information about this issue can be read here: Percentage bugs in webkit

I would recommend you to always use pixels to don't have any layout dimensions differences between browsers.

Answer 5

Percentage layout

This is generally referred to as fluid layout. Your elements will take a defined percentage of the total space available to them. This available space is determined by the element's parent.

When using percentage layouts, it's a good idea to specify a min-width and max-width on your design so that it remains usable at very low and high resolutions.

Pros

1. Scales with screen size, therefore get to use more space if it's available.

Cons

1. Makes it more difficult to know the exact position of something on screen. As a result, it can make creating precise layouts more difficult.
2. Can lead to unexpected layouts if child elements are fixed width (i.e. an image) and end up being larger than their fluid width parent.

Pixel layout

This is usually known as fixed layout. Your element will always be the same defined pixel size and will not take available parent space into account.

Pros

1. Always know an element's exact size.
2. Creating precise layout is easier.

Cons

1. You don't scale with resolutions. Your layout will always be the same width, making for wasted space when people have high resolutions.