Working with non-semantic elements

Most often, when a web page is putforth for review, the reviewers look for typical 'classitis', 'divitis' problems. Use of pseudo selectors needs more in depth inspection. Use of non-semantic entities are most often frowned upon. Infact the foremost guiding principle for a good html page, is to leverage the page content for styles (and not styles for content). Atleast that was what I thought of till date.

Recently when coding for a tricky piece of java script behaviour. I happened to come up with a simple solution that violated the guiding principles. The exact problem is irrelavent, but just to satisfy the curiosity, it has something to do with footer behaviour which varies with the page content. The crux of the solution was to rely on certain invariants on screen (images in this case) and position/scale/stretch my footer. What appealed the most was the idea of introducing non-obtrusive style invaraints at a template level and use them as guides to setup the behaviour rest of the page.

How about having an 'gif' border around the content or a absolute/fixed positioned images? Most of the time there may be some, if they don't why not introduce an element of transparent gif (not for spacing purpose). The intention is to simplify the javascript part, especially computing offsets and widths becomes a lot more easier. Just to clarify, this idea/pattern suits only code relevant to behavioural aspects. (The presentational aspects should be in CSS alone).

The next time, someone asks me to align textboxes or labels (from a behavioural point), I will definitely consider this approach.