I've been working with this for awhile and I'm pretty sure its unsolvable. Just thought I'd throw it out to find out if someone smarter than I can figure it out (without changing the markup! :)
The layout below is a typical tableless css based design with header and footer sandwiched between two columns (content and sidebar) using floats and relative positioning.
This particular layout is a WordPress theme that I've designed dozens of sites around solely with css and images. That's why my requirement is that the markup remain as is.
I'd like the "avatar" div to stay anchored to the top of the header div regardless of the height of "featured" and without using "position:fixed" or changing the markup order. If you copy the code below and save it as an .html file, you'll see that it does just that right out of the box. However, once you add or subtract height from "featured", "avatar" will move accordingly up or down. That's the challenge, I need avatar to stay at the zero position relative to the body, regardless of the dimensions of "featured".
Setting "sidebar" to absolute positioning would be the obvious solution, however, it suffers in that it will screw up the flow of the footer div below content and sidebar (whichever is taller).
I'm thinking that the answer might lie in one of the table display properties (since this is essentially creating an unmerged cell out of sidebar and setting its top margin relative to its parent container), but that's one area of css that I've largely left alone.
<!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" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
body {margin:0;padding:0;}
.header {height:100px; background:red; width:977px; margin:0 auto;}
.main {width:977px; margin:0 auto;}
.featured {background:green;height:50px;}
.content {float:left; min-height:300px; border:1px solid #777; width:700px;}
.sidebar {background:blue; width:250px; float:right; min-height:400px}
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;}
.clear {clear:both;}
.avatar { width:200px; background:orange; margin-top:-150px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
<div class="sidebar">
<div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div>This content should flow below avatar relative to avatar's height</div>
</div>
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div>
</div>
</body>
</html>
