Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Responsive Web Design and Testing Responsive Web Design

Posted by Keith Ostertag
Keith Ostertag
16,619 Points

When to use absolute vs relative values?

I get the Responsive Web Design concept in general, but is there a rule or list of properties showing which properties generally should get relative sizes?

For instance, so far during this course Nick has often used absolute measurements for such things as borders, margins, and padding, while sometimes also (elsewhere in the same document) using relative measurements for font-size, padding, margins, etc. As a beginner, so far this seems a bit arbitrary.

So, are there rules or lists which can unambiguously state which properties benefit from relative measurements most of the time? Or maybe which elements generally don't benefit from relative measurements and should be used with absolute measurements?

I think Nick does a great job as an instructor, but this aspect isn't yet clear to me.

3 Answers

Shani Connell
Shani Connell
26,307 Points
Shani Connell
Shani Connell
26,307 Points

Hey Keith, I'm still new to this sort of conversation myself but here are a few things to read through that might help you understand the concepts you mentioned above.

"If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Position Absolute: When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go."

[http://webdesign.about.com/od/advancedcss/a/aa061307.htm]

There are lots more resources like this out there so if you have time for a reading session just do a quick google search :) Hope this helps and good luck with your Treehouse project.

Keith Ostertag
Keith Ostertag
16,619 Points
Keith Ostertag
Keith Ostertag
16,619 Points

Thank you for the link Shani! Very informative. I am also beginning the CSS-Tricks course, so I think I'll be learning more details soon.

Keith Ostertag
Keith Ostertag
16,619 Points
Keith Ostertag
Keith Ostertag
16,619 Points

A partial answer that I found enlightening is in the link provided by Guil as a teacher note in the CSS course:

https://docs.webplatform.org/wiki/tutorials/understanding-css-units

"The CSS pixel is a ‘reference’ pixel, not a device pixel. This is misleading and, personally, I prefer the notion of ‘user unit’ that SVG uses because I think it is easier to then explain the mapping to physical units and device pixels. But once one understands that a ‘px’ is actually a reference, not a device pixel, things make more sense. The thing to remember is that a CSS px is an abstract unit and there is a ratio controlling how it a) maps to actual device pixels and b) maps to physical units (in a fixed way, the ratio is always 96 CSS px to an inch)."

This partially explains why, for instance, there's no longer a need to give relative lengths to pixel measurements: the "pixel" has been re-defined in recent years (something I had not been aware of).