9

I have very strange "issue", on most browsers (ie, ff, chrome, safari). Here is example code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        html{
            outline: 1px #0ff solid;
            background: rgba(0,255,255,0.1);
        }
        body{
            margin: 0;
            padding: 0;
            outline: 1px #00f solid;
            background: rgba(0,0,255,0.1);
        }
        #aDiv{
            width: 300px;
            outline: 1px #f00 solid;
            background: rgba(255,0,0,0.2);
        }
        #bDiv{
            margin-top: 100%;
            outline: 1px #0f0 solid;
            background: rgba(0,255,0,0.1);
        }
    </style>
</head>
<body>
    <div id="aDiv">
        <div id="bDiv">
            content
        </div>
    </div>
</body>
</html>

When You change #aDiv width, then #bDiv margin-top will change with same value. I dont know how it is possible, that height goes to width. Anyway maybe one of You could explain me whats going on?

Best regards ;)

D.

Artnova Art
  • 93
  • 1
  • 3

4 Answers4

13

This is actually according to the spec

<percentage> The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

Pretty useless, right? Have you considered using position: absolute and bottom: 0? They might be more of what you're looking for.

Ryan Kinal
  • 17,414
  • 6
  • 46
  • 63
  • I was working on quite different thing, however since browsers are not always working as expected, i was testing totally random attributes, as margin-top: 100% is a bit silly. And i get strange corelation between (vertical) margin-top/margin-bottom, and (horizontal) width. As you said, pretty useless ;) – Artnova Art Oct 05 '11 at 13:24
  • 2
    what kind of moron put this in the standard.. that's.. almost unbelievable stupid, basing vertical percentages on horizontal values. – Noishe Feb 06 '14 at 02:01
  • @Noishe There is [some speculation](http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width/11004839#11004839) that it's a technical limitation, due to the flow of DOM elements. – Ryan Kinal Feb 06 '14 at 14:25
  • It's a weird choice, but definitely not useless especially when you want the height to match the width. Lot's of applications including most of "card" implementations ;) – Erdal G. Jan 30 '16 at 10:56
8

You could try viewport relative units ( 1vw = 1% of viewport width, 1vh = 1% of viewport height).

Tried margin-top: 90vh; ?

cptstarling
  • 769
  • 6
  • 11
4
#bDiv{
        margin-top: 100%; --> This need to change
        outline: 1px #0f0 solid;
        background: rgba(0,255,0,0.1);
    }

Its not a strange issue. It because you have set the margin-top to 100%, since aDiv is the parent of bDiv it take the width of aDiv as margin-top.

huMpty duMpty
  • 14,346
  • 14
  • 60
  • 99
  • 2
    it was clear to me how to remove this issue, however I was curious about reason, why vertical percentage gets value from horizontal parent width. It makes no sense... – Artnova Art Oct 05 '11 at 13:19
1

It's all to do with your CSS on bDiv having margin-top: 100%;

If you remove this, everything acts normal again.

Luke
  • 22,826
  • 31
  • 110
  • 193
  • 1
    it was clear to me how to remove this issue, however I was curious about reason, why vertical percentage gets value from horizontal parent width. It makes no sense... – Artnova Art Oct 05 '11 at 13:19
  • Please refer to Kasun's answer – Luke Oct 05 '11 at 13:21