Take the 2-minute tour ×

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

      bloody mess of <table><tr><td> tags
--- div footer to go here ----

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?

share|improve this question
Without the offending HTML, no one can really guess. –  Diodeus Aug 16 '11 at 17:58
+1 for "bloody mess of table tags". I take it you've inherited this abomination? –  Bojangles Aug 16 '11 at 17:59
Diodeus - The HTML file is about 12,000 lines... I am not looking for a guess. I am hoping for some helpful ideas from somebody who has experience dealing with the way browsers treat broken HTML or somebody who had to contain messy HTML. –  user897210 Aug 16 '11 at 18:04
JamWaffles - yes this is inherited... This thing has tables 5+ layers deep. If this were my creation, I would have to rip my own arms out and slap myself with them. –  user897210 Aug 16 '11 at 18:06
Slapping yourself with your own arms... Interestingly plural! –  Pindatjuh Aug 16 '11 at 18:08

2 Answers 2

up vote 1 down vote accepted

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.

share|improve this answer
Yep, one of the higher-level tables was styled as position:absolute. Other components were floating, so that table just went on top of them. The footer jumped to the bottom once I removed the position:absolute. Thanks! –  user897210 Aug 16 '11 at 19:29

Let the browser parse the page, and dynamically insert your <div> using Javascript's DOM access:



This way, the browser will parse the "bloody mess". This does not guarantee browser compatibility, however, as it depends on how each different browser parses the "mess".

share|improve this answer
Thank you Pindatjuh, this is an interesting and innovative idea... but I will accept the position:absolute answer because it led me to to the solution. –  user897210 Aug 16 '11 at 19:31

Your Answer


