hi,
after a bit of googling - "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." from
http://stackoverflow.com/questions/7266363/margin-top-percentage-does-not-change-when-window-height-decreases
which cites
http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties
if, however, you were to ask me how to fix this... i don't know. yet.
~Adam
Dne 21. 8. 2013 7:28, Noel Taylor napsal(a):
This is probably an old problem, but I can't find the answer. All I need
is:
1. A floating container div whose height varies with the size of the window.
2. A fixed-size div inside whose vertical position varies with the size of
the container.
3. Another fixed-size div right underneath the one in #2.
The following code satisfies condition #1 and #3: resizing the window also
resizes the container div correctly, and the second inner div sits
correctly below the first inner div.
But condition #2 is not satisified. I thought "margin-top" as a percentage
would make the value vary based on the height of the parent container, but
apparently it doesn't work that way. Resizing the window does nothing to
the vertical positon of the inner div within the container div.
This doesn't seem like it should be that hard, but it's crazy! Please help!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>css test</title>
<style>html, body {height: 100%;}</style>
</head>
<body>
<div style="float: left; height: 50%; width: 100px; background-color: #C00;
text-align: center;">
<div style="height: 40px; width: 40px; background-color: #0C0;
margin-top: 50%;"></div>
<div style="height: 40px; width: 40px; background-color: #00C;"></div>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
