Absolute div layout requires bottom edge of document with fixed footer

Question

Somehow I can’t understand what I’m missing ...

I am trying to position multiple absolute between two fixed columns (header and footer). The header contains some tabs, and the footer contains copyright. I want to use the scroll bar of the window, not a crowded div, and I know that this should be possible!

Each absolute positioned div must have an extra edge, so that the bottom of that div does not disappear behind the footer.

This should be something like this:

Below is a snippet of my problem 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 that I use:

  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 have any hints?

Additional Information As you can see in the attached image, the purple border of the square div div at the bottom right overlaps the fixed footer. I do not want this. There should be a bottom margin indicated somewhere, so each div has an extra margin to fit the top of the footer

Answer 1

Here is the solution I came up with. Wrap the bottommost positioned div inside with another div , on which set the bottom margin equal to the height of the footer and the border. I gave him a .inner class.

See my script .

Answer 2

Add a footer to the body document equivalent to the height of the footer:

 body { padding-bottom: 31px; } 

(JSFiddle does not seem to allow you to change the style of the body element, so I cannot publish the script. However, it should work.)

Answer 3

Instead of using absolute positioning, do something like:

margin - left: 800px

Margin - top: 500px