with an extra container div and relative/absolute positioning, you can
get the desired effect... check http://codepen.io/anon/pen/eiJpr
~A
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/
