Search code examples
csscross-browserpositioningcss-float

Choosing a dimension standard for CSS; percentages vs. pixels

A client has requested design for a media site and has emphasized that the layout should appear consistently across desktops, laptops, and tablets (mobile will use a different layout). They want a two column layout where the columns scroll independently of each other. Having no formal training and little experience with CSS, I was hoping some CSS experts could weigh in on the advantages and disadvantages of using percentages for CSS sizing.

Some Questions:

1) I would think that the number of resolutions across different devices would cause sizing inconsistencies on elements with assigned pixel height. Is it problematic to use pixel heights?

2) Are there any browsers or devices that do not recognize percentage element sizes?

3) Will it cause issues in future coding (i.e., are there any problems with sizing elements by percentage in JavaScript?)

4) The following CSS accomplishes what I'm looking for in Chrome, Firefox, and Safari on the Mac I use for testing. Are there any browsers or devices that will behave unexpectedly using this CSS?

#wrapper { position: relative; width: 99.9%; margin: 0 auto; } 
#left { position: absolute; left: 0; float: left; width: 31%; margin: 0 2% 0 0; height: 100%; overflow: auto; }
#right { position: absolute; float: right; margin: 0; width: 66%; height: 100%; overflow:auto; }

5) Do percentage sizes automatically adjust on resize events or orientation changes?

6) Is there a standard minimum gutter size for accommodating scroll bars in the middle of the layout?

7) Are there any factors that I've overlooked in choosing percentages for sizing CSS elements?

Solution

  • Quick and dirty answers.

    1. It can be, especially in terms of maintenance. Pixels are a unit of the past. I would recommend either using ems or percentages.
    2. Unless you are looking to support console-based browsers, no.
    3. No problem.
    4. I haven't tested, but that looks fine even for IE.
    5. Yep.
    6. No, and don't bother finding one. Some setups may not even show scrollbars (i.e. most browsers running on OS X Lion)
    7. Not really. None that I can think of.