Should we use % or px for setting widths on elements?

I already had one in mind!

When setting widths on elements (not text elements), what value should we use % or px? (keeping in mind supporting multiple screen resolutions).

I can have my site look wonderful on my machine, I ask someone to view it with a higher res and things are misaligned, 'jumping out of place' etc. In the site I am currently building I have set all my margins and widths using % (thinking it will span all/most resolutions the same).

Half the trouble is, my highest resolution I can go to is 1280x800. It seems to get worse as it goes higher, so my 'testers' have told me

Would you possibly be able to take a quick look at it for me in a higher resolution?

Site is located: Nanomech's site


Kind regards,

NM.

Note: I'm going to split this thread later.

I must admit that I mostly use fixed width layouts (for desktop browsers but not necessarily for mobile devices), though that's largely due to the designers I usually work with. There are advantages to it though. You're less likely to have breakage at high browser widths and they tend to be a little simpler to make as well. On the other hand, fluid width layouts are definitely more flexible (when made well anyway). Fluid width layouts can get too wide though (which can make reading the content difficult). So it's often best to set a maximum width.

Here are some good articles that explore the pros and cons of this complex topic:
Fixed vs Liquid vs Elastic
Elastic Design
About fluid and fixed width layouts
Fixed or fluid width? Elastic!
The Incredible Em & Elastic Layouts with CSS
Specify a maximum width for em-based layouts
CSS Layouts: The Fixed. The Fluid. The Elastic.

http://www.maxdesign.com.au/articles/em/
http://baymard.com/blog/line-length-readability
http://www.viget.com/advance/the-li...-misconception/


1280x800 is a bit low by today's standards (at least in width). If you had a choice, I'd recommend the highest common resolution, which currently seems to be 1920x1080.

Keep in mind that the higher a screen resolution someone is using, the more likely that their web browser won't be maximized.
The importance of window-width
The Definitive FAQ on Screen Resolution
Actual Browser Sizes
Poll results: 50.4% of respondents maximise windows

A simple solution would be to use the max-width property to set a maximum width for the page.

I glanced at your site briefly earlier this week, but right now I'm getting this error when I try to look at it:

Thank you so much for all them links. It will definitely be a loooon g night. I think the site you saw earlier this week was the old version, I've totally re-designed the back end and use db for a lot of the content.

I have just visited the link in my other post 3 times and it seemed to load the page ok.

Is that the whole message? I only ask because it seemed earlier, if I clicked the links too quickly, it showed me a blank page with 3 error messages. Next time it happens I'll copy and paste it just to check it against yours.

Regards,

NM.

Your site is available again. "flowerbed.fw.png" looks odd when stretched to 909px in width. I would suggest giving a max-width of the image's width to "#navigation_div".

I'm glad to see you're using a min-width on "#container", however, at that minimum the left column seems a little too narrow.

By the way, paragraphs that have centered text can be difficult to read. It's best to use "text-align:left" for them (assuming ltr, left-to-right, text).

I'm curious, is there a particular reason why you're using XHTML 1.0 Transitional? Did you notice that your page has a random </noscript> end tag?


Which message? Perhaps you saw my post before I changed the links to archive.org's copy of each page. If you wait a little they should redirect to show the article.