Lots Of Extra Space From Using Position:relative....

[therschbach]

But I don't know how to get rid of it. Check out what I'm talking about. Scroll to the bottom of my page. You can see the footer is several hundred pixels above the bottom of the container div that has the border.Dirtjournal ReconstructionI have an overlapping div situation because of the transparent quarter at the top of the page, so I had to use position:relative instead of floating everything. This caused a bunch of blank space at the bottom of the div where the content of the page was moved from. How do I collapse this space?Thanks again, you guys have really been a big help.Here is the css if you want to look...

body{background-image:url('pictures/coinbackground.jpg');}p {font-family: arial;}div#entire {margin: 15px auto;width: 900px;border: solid 3px black;}div#bannertop img, div#bannerleft img, div#bannerright img, div#overlapquarter img{display: block;}div#bannerleft{width: 81px;float: left;}div#overlapquarter{width: 70px;position: relative;z-index: 1;}div#bannerright{display: block;width: 22px;position: relative;left: 797px;top: -87px;}div#menubar{clear: both;text-align: center;width: 797px;background: black;position: relative;top: -688px;left: 81px;}div#menubar img{margin: 3px;vertical-align: middle;}div#intro{width: 797px;background: gray;position: relative;top: -688px;left: 81px;}div#intro p{padding: 5px;margin: auto;width: 750px;text-align: center;}div#toDateInfo{width: 797px;background: #bab7b3;position: relative;top: -688px;left: 81px;text-align:center;}div#toDateInfo p{margin: 0;padding: 8px;}div#main{margin: 0 0 auto 0;width: 797px;background: gray;position: relative;top: -688px;left: 81px;text-align:justify;}div#main p{padding: 15px;margin: 0 auto;}div#footer{position:relative;left: -81px;width: 890px;background-color: silver;padding: 5px;}div#footer a{color: black;text-decoration: none;}div#footer p{color: black;text-size: .7em;margin: 0;vertical-align: middle;}div.light{background: #bab7b3;}div.dark{background: #948e8e;}p.center{text-align: center;}

[therschbach]

Ok, I've done some reading and I have a theory, although I can't test it now as I'm at work. If I change my position:relative divs to position:absolute divs, this should make the space go away, right? Because relative divs leaves a hole, whereas absolute divs virtually become invisible to the flow of the page.

[jlhaslip]

I tried and it moves the footer up, but the space is still there.It also messes up the top-left corner image.

[therschbach]

Ok, I tried it and did some image alignment tweaking and it worked. However, this made the entire container border ignore the majority of the content so it stopped short. This wasn't going to work, so I tweaked everything with my new understanding of relative and absolute positioning, and used float to align the center content area. Now everything is working. I used the overflow:hidden trick so the border would go around the floated objects. This did not work on position:absolute elements which is why I had to change to float.Check it out...Dirtjournal rebuildI'm getting excited now. I just need to build some new menu buttons and then I can start writing js & ajax for functionality of drop down menus and content filling.