Containing super messy table-based HTML layout

I am trying to add a footer to a table-based HTML layout that has numerous nested tables. The structure looks something like this:

<head>
</head>
<body>
    <form>
      bloody mess of <table><tr><td> tags
    </form>
--- div footer to go here ----
</body>

The DIV footer ends up hanging behind the main table about 1/4 of the way down... I assume that means some table/row/cell tags are not closed properly...

I tried putting divs around the form, hoping that would force the browser to auto-close all unclosed tags. That did not work.

I would prefer to re-write the whole thing, but the page is not documented, very complex, and has numerous includes.

Any ideas?

Solution

In order to check whether your tags are correctly closed you may way to validate your HTML.

Without seeing your code it's difficult to guess at what the problem could be but here's a sugestion.

The table could be floated using CSS or positioned absolutely (position:absolute). If this is the case you may need to remove the float or positon.

Given that your layout is currently table based, and given that you're not re-writing the whole thing, the easiest option may be to add an extra table row at the bottom for your footer.