I'm working on a Youtube userstyle script that displays comments side by side with the video so you can watch the video and read the comments at the same time (what a marvelous idea - duh). You can see in the screenshots how far I've got. That means I only care about Firefox, and that CSS3 goes.
The problem I have is that I want to make a fully fluid layout and have the "other videos" div float to the right, while the middle div (the comments) stretches to fill the remaining space between the left div (the video played) and the right div (the "other videos").
Translated to CSS, the problem is: given divs "main", "rightnav" and "footer", in this fixed order in the document, how can I make the rightnav div float to the right, and the footer BELOW it? The best I managed to do was to absolutely position "rightnav" (right: 0), but then the footer goes below the "main" div, not below both of them. I've looked at http://stackoverflow.com/questions/220273/css-positioning-div-above-another-div-when-not-in-that-order-in-the-html already. Negative 'top' values are out, as they depend on the content of the 'main' div.
Here's the source code:
<html lang="en-US">
<head>
<style type="text/css">
#main {
border: 1px solid;
float: left;
margin-right: 410px;
}
#rightnav {
background-color: yellow;
opacity: 0.5;
border: 1px dotted;
width: 400px;
float: right;
position: absolute;
right: 0;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="baseDiv" style="width: 100%">
<div id="main">
<script>for (var i=1; i<100; i++) document.write('main ');</script>
</div>
<div id="rightnav">
<script>for (var i=1; i<200; i++) document.write('rightnav ');</script>
</div>
<div id="footer">
<script>for (var i=1; i<100; i++) document.write('footer ');</script>
</div>
</div>
</body>
</html>
Hopefully it's clear what I want to achieve: the "footer" below the two divs, and the "main" div fluid.
Thanks for any ideas.