Here, at great length, is the sequel to my post on aspect ratio, about vertical positioning. Again, horizontally, everything is easy – declare width: and left: as percentages, and as the screen size changes, they will change in tandem.
For vertical positioning originally (i.e., almost a year ago – but then again, only almost a year ago) I thought it would be easiest to have a div above the one in question that always pushes it down by the correct amount, but you either have to do the aspect ratio business on it or slice your images so the aspect ratio is taken care of that way (hence my post on white space). However, and I’m sure I read this when I was reading about padding but had it fly out of my brain for a while, not only is percent padding calculated from the width of the object, percent margin is too. Setting margin-top to the appropriate percentage will keep your objects in the correct vertical alignment upon resizing.
Just as with padding, though, in practice I didn’t get the predicted margin from my numbers.
If you know the percentage of the padded div’s width that your margin should be, and your padded div is not 100% of its container, you make the same calculation as for padding: (coded margin) = (desired margin)*(width). I have discovered that there is one situation where a div that is not 100% of its container is great: giving some element the same margin to the left and top edges of the screen. Suppose I want a margin that is 5% of the screen width, on an element that is 20% of the screen width. I can do left: 5%; and then calculate a margin-top. If the 20%-wide element is sitting immediately within a container that is the full width of the screen, the calculation simplifies nicely: 5% of the screen is 5% * 100% / 20% of the element (desired margin), but then you have to make the adjustment of multiplying by the width, 20%. You get (coded margin) = 5% * 100% / 20% * 20% = 5%, or (coded margin) = (desired margin).
One advantage to this method, aside from the lack of reassembled background slices, is that if you don’t have something from which to calculate a good margin or padding percentage it’s easy to tweak them and see how they look. I find myself occasionally mocking up pages without the final graphics in hand, so there’s a limit to how much arithmetic I want to do to fit everything together perfectly.
One final note: The reason this got put on the back burner originally is that I had unwittingly swapped out top and margin-top, so my test page was not working as expected. While left and margin-left are interchangeable for absolutely positioned elements, top and margin-top are not at all. Left, right, top, and bottom percentages refer to the height or width of the containing box according to whether they are height or width measurements; margin percentages are always according to the width of the containing box. Hence you will need margin for relative vertical positioning, though you may then need to set top: 0; to make sure your element is positioned relative to the top of the window.
3D pantograph rendering by Joseph Lertola, via Wikimedia Commons.
