Absolute positioned div needs bottom margin on document with fixed footer

Question

Somehow I can't figure out what I'm missing...

I try to position a number of absolute divs between two fixed bars (header and footer). Header contains some tabs and footer contains an copyright. I want to use the window's scrollbar and not an overflowed div and I know it should be possible!

Every absolute positioned div should carry an extra margin, so that the bottom of that div does not disappear behind the footer.

It should become something like this:

A snippet of my problem is available here on jsfiddle.

My HTML:

<ul class="cf tabs">
    <li>Tab 1</li>
    <li>Tab 2</li>
</ul>
<div style="margin-top: 40px; padding-bottom: 30px; position:relative">
    <div style="position:absolute;top:300px; height:100px; width: 250px; left:200px; border: 1px solid purple;">aaa</div>

    <div style="position:absolute;top:0px; height:100px; width: 100px; left:100px; border: 1px solid purple;">bbb</div>

    <div style="position:absolute;top:450px; height:100px; width: 250px; left:400px; border: 1px solid purple;">ccc</div>
</div>
<div class="cf footer">Copyright &copy;</div>​

The stylesheet I'm using:

    ul.tabs {
        list-style-type: none;
        list-style-position: outside;
        padding:5px;
        margin: 0;
        position:fixed;
        top:0;
        z-index: 999;
        background-color: white;
        left:0;
        right:0;
        border-bottom: 1px solid green;
        opacity: 0.7;
    }
    ul.tabs li {
        float: left;
        margin:1px;
        padding: 4px 10px 2px 10px;
        border: 1px solid black;
    }


    div.footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right:0;
        background-color:#DEDEE9;
        border-top: 3px outset #BBBBBB;
        padding: 5px;
        opacity: 0.6;
    }

    .cf:before,
    .cf:after {
        content: " "; 
        display: table; 
    }
    .cf:after {
        clear: both;
    }​

Do you guys have any hints?

Extra info As you can see in the attached image the purple border of squared div at bottom right is overlapping the fixed footer. I do not want this. There should be given a bottom margin somewhere, so that every div carries an extra margin so it should match the top of the footer

Answer 1

Here's the solution I've come up with. Wrap the bottommost absolutely positioned div inside with another div, on which put bottom margin equal to footer height and the border. I gave it class .inner.

See my fiddle.