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/
