Done a search and found many advocate for % when positioning divs while others advise on px. What is the 'proper' (if one exists) way and what situations should you use either method?

Many Thanks!!!

I don't know which way is proper or if one is but I like % because it keeps things liquid. (I've used both ways before, I guess it depends on what I'm trying to make.)

totally depends on the layout.
some things you want to keep in a specific spot.
other things you may want to move about with res and window size.
there is no 'proper' or 'non-proper' answer as both can be correct.

Thanks for the replies. An additional, easy, question if I may:

I am just starting to play with percentages, so...When using %, how do you prevent the material from collapsing when you shrink a window? I hope that makes sense.

Thanks again!!!

The point of using percentages is so that the elements do move when you resize the browser window - percentages make the layout "liquidated".

Using exact values "freezes" the layout, meaning the elements won't move about.

I should have known that...thanks for the clarification.

You're welcome :)

If I could follow up... I have completely confused myself with % and px, so I should probably get back to the basics.
So here is my question: to ensure that a picture/text/div...whatever is centered horizontally on any sized screen (17", widescreen, etc.) should the value be set to % so the location appears the same on all size screens. Or am I way off, as there is a much easier explanation?

Thanks for all the help!!

To ensure that an element is centered at any window width, you would have to use a percentage-based value with absolute positioning. This is because percentages are a relative unit, and are based upon the dimensions of their parent element, allowing their values to change along with the dimensions of a parent element.

Let's say, for example, you had a canvas that was 800 pixels wide, and an element with a total width of 400px. Yes, you could position it from the left (or right) by 200 pixels and the element would appear centered - would be horizontally centered - with 200 pixels of space on either side of it. However, if the canvas width were to increase or decrease by even one pixel then, though the element would still be 200 pixels from the left or right, it would be, correspondingly to the change in width, closer or farther from the opposite side and can result in clipping situations. Not necessarily a problem, depending on how you want your page to appear, but absolutely useless for centering and not suprisingly.

Let's instead use a percentage value so that the distance from the side can adjust with changes in the dimensions of the window canvas. We would position our element a value of 50% from the left side. This won't, of course, be quite enough to center it since this positions the element's leftmost edge, meaning that edge is in the middle of the page, but the rest of the element just hangs off to the right. So, how do we account for this? Easily: with margins. Let's say we have the same 400px wide element 50% from the left of the screen. We need to shift this element to the left so that its center is centered, and not its left edge. So give it a negative left margin of 200px to pull it halfway to the left: problem solved!

The same works for vertical centering, only using height, of course: check it out (http://jfweb.fastmail.fm/center/center.htm).

To center an element which you cannot position absolutely, say content which you do not wish to separate from the normal document flow, you should avoid the use of the center element as it has been deprecated. Rather, we'll resort again to margins. Since you should be using the latest version of HTML, I'll assume you are using at least the XHTML 1.0 Strict DTD, which will alow this method to work across a majority of browsers. Simply assign the element a fixed width like we did before. Could be 400 pixels, could be 10 pixels; whatever you need. Then give the element a left and right margin of "auto". Take a guess at what this does. It calculates the width of the element's parent element, subtracts the value of the element's width, and divides the remaining horizontal space among the left and right margins, effectively centering the element.

Hope this helps!

Wow...Thanks J for the lesson. Absolutely the best explanation I have seen. Thanks again, however I may be back for a follow up after I play around.