On the second link above the footer hasn't cleared the left content because you have absolutely placed some of those items in the left content. There is no way to clear absolute elements (without scripting) so you need to change those elements to statically placed elements as there is no need for the main part of them to be absolute.
Obviously the decoration images etc can be absolutely placed but the main content can be static and take up space on the page. The left column is floated left so you should just stack your content in that column logically and without the need for absolute positioning.
Absolute elements exist in their own little world and have scant regard for anything else on the page. Therefore when you use absolute positioning you have to make sure that you are not going to add things like footers that need to react to the absolute elements height.
Hope that makes sense.
Alright I've tried the static positioning but that part just gets me even more confused, would you be able to do up some pieces of this pages code properly as a building block Paul so I could go from there? It just doesnt make sense to me .. well only some of it. I've been using tables for years and trying to make the conversion, you understand? Thanks Paul ... if you have time that would be great ...
Edit - One thing I did try was putting all the absolutely placed elements on the left side into their own relatively placed div ... that sometimes seemed to work but not to the effect I was hoping for.
I realise it can seem a bit awkward at first as theres so many thngs to think of :).
I'm just offline now but I will look at it tomorrow and try to give you a solid foundation to work on.
Thanks Paul, I look forward to getting this right!
The other thing I'm trying to correct is having expandable panels on the public page, those two boxes in the middle I mean ... they need be able to stretch depending on the width of the page. I've been working on this all morning and have gotten most of it I think ... the problems are:
When you resize the window smaller, the elements begin to overlap (too soon I think than it should) and a gap appears in the headers.
The whole box is only supposed to be about 206px tall, but they are around 230 for some reason ...
Also is there a way to get the right side box to not overlap the left box when resizing the window smaller?
Thanks so much!
Sorry in not replying earlier but something unexpected cropped up to take my time. I will finish off looking at this later today as I haven't completed it yet and its time for bed :)