CSS fluid layout: margin-top based on percentage grows when container width increases [duplicate]

Question

I'm just learning CSS fluid layouts & responsive design, and I'm trying to use all percentage values with no px values in a layout.

So far it seems to be working, but in one spot, I'm seeing something I didn't expect. I'm trying to put a margin between two vertically stacked divs that changes based on the height of the container. I'd expect that margin to change when I resize the window vertically, but it also grows if you resize it horizontally, which I don't want. What am I missing?

Here's a fiddle. Thanks for your help in advance.

http://jsfiddle.net/gregir/aP5kz/

Derouen

Viewport units for CSS vw, vh 1vw = 1% of viewport width 1vh = 1% of viewport height – Conspecific

Answer 1

In CSS, all four margin: and padding: percentages are relative to the width ...even though that may seem nonsensical. That's just the way the CSS spec is, there's nothing you can do about it.

Can you do what you want with 'ex' (or 'em') instead? That's the way I'm used to seeing "fluid" values for margin/padding specified ...and it may be less problematic than percentages. (Although I don't have the relevant first-hand experience, I suspect the extremely long precisions on your calculated percentage values are going to set you up for browser incompatibility problems later. My style is to limit CSS percentages to integers if at all possible, or occasionally perhaps one or sometimes maybe even two digits after the decimal point.)

If you really want an exact arbitrarily-sized empty vertical space that's a percentage of the container, the first thing that comes to my mind is a separate empty < div > with a "height: nn%" CSS specification. Or perhaps something else you're specifying is already handling the vertical sizes they way you wish (since it would appear the margins aren't really doing anything at all on a vertical resize).

Liv

Thanks, Chuck. I really needed to use percentage values for the margins, as the interface I'm building will fluctuate very widely, from large to small, and if my large elements become very small but there's a 1em margin between them, it looks odd. On the long precision values, I lifted the idea from A List Apart (alistapart.com/articles/fluid-images) and hadn't actually planned to use those in production. At any rate, your suggestion re: an empty div there will work just fine; it's simple/elegant, and wish I'd thought of it myself. Thanks, again! – Derouen

#11004411 – Pointillism

@Mr. TA - I can see why the spec is the way it is. If top and bottom margin percentages were changed to be relative to the height, while left and right margin percentages remained relative to the width, there'd be no way to specify margins (and padding) with percentages, yet also have them equal all the way around. (It's also the basis of a weird CSS hack for maintaining the aspect ratio of an element.) These are tough choices; take a deep breath before you conclude they're simply a "design flaw". – Liv

@ChuckKollars I think they could've done it 2 ways: different for height than margin. I understand why they made this choice, but I still don't agree with it. – Pointillism

Massive design flaw for sure. If you want margins that are equal all the way the around, then use units like EM, which are relative to a singular dimension like font size. Percentage, like EMs, are relative units, but unlike EMs, a percentage is relative to two potential dimensions -- width or height. To treat it as always relative to width, even on HEIGHT-related fields, is not only insanely unintuitive, but it also makes it impossible to collapse a child element to a -100% margin to have it 'slide up like a drawer' into it's parent to hide it. Terrible, terrible, terrible design flaw. – Road

Answer 2

Yes, it is unexpected and counter-intuitive, but it works as designed & I have no idea why it works as it does. See margin-top percentage does not change when window height decreases

Marshmallow

Weird. And I'm sorry I missed this in my Stack search earlier. No idea how to get around this, but I guess I'd better get my thinking cap on. Thanks. – Derouen