Issue with large blank spaces

[Fmdpa]

I am working on a footer, which ended up being a much larger project than I anticipated. On my page, I have four main elements. There is the body, which has a large background image, and an undefined height. Then there is a head div, which contains the navigation menus. Then there is the body, which is a small image that repeats-y. Last of all, there's the foot, which I am working on now. It is about 200px high. When that div is empty, there is only a very small border of empty space below it (body). But when I start to add content to that div, such as relatively positioned unordered-lists, then the border below the #foot div heightens. So if I have 3 unordered lists that are each 150px high, then even when I align them all inside the #foot div, the space below the #foot is about 200px high (150px * 3 - 200px (...the height of the #foot)). In other words, the body height acts like the lists are all still aligned vertically, but they aren't. How would I fix this?

[dsonesuk]

position: relative remain within the flow of other elements, in that even though they are position elsewhere the space is still shows as occupied.float will take the elements out of flow from non floated elements below them, position: absolute;, position: fixed; will take them out of the flow of other elements completely, which will result in the other elements occupying there vacated space.