Position DOM elements without CSS

Question

There are several methods for (absolute) positionning of a DOM element in a HTML page :

• style directly in the CSS with top / left :

  position: absolute; top: 100px; left: 50px;

• style directly in the CSS with transform:

  transform: translate(50,100)

• and of course, CSS style modification with Javascript :

  element.style.top = "100px";

  ...

But these are all CSS methods.

Question:

Is it possible to set DOM elements' position without CSS? (for example thanks to some methods that were available in browsers before CSS became famous or simply before CSS was added to browsers)

Note: This question is for pure knowledge / browsers' history / culture. I won't necessarily want to use it.

Answer 1

(Warning: Sarcasm and humor abounds)

A Clean Table For Layout

Tables were the only way to position elements without CSS.

Let's take the legendary "3 column layout" as an example (with room for the new 768px wide banner ad AND a 300px wide box ad on the right!).

<table cellspacing="1" cellpadding="0" width="1318" bgcolor="gray">
    <tr>
        <td width="200" bgcolor="white">
            <img src="spacer.gif" width="200" height="1">
        </td>
        <td width="768" bgcolor="white">
            <!-- body content goes here -->
        </td>
        <td width="300" bgcolor="white">
            <img src="spacer.gif" width="300" height="1">
        </td>
    </tr>
</table>

So nothing majorly crappy here. Just some widths and spacer GIFs. Perfectly acceptable for late '90s and early century browsers. Pretty standard fare. But wait, you need to support Netscape 4 as well!? Now we have a problem.

The "Netscape 4" Problem

Netscape 4 didn't display a table background through the cellspacing so we need some additional HTML:

<table cellspacing="0" cellpadding="0" width="1268">
    <tr>
        <td bgcolor="gray" colspan="7">
            <img src="spacer.gif" width="1" height="1">
        </td>
    </tr>
    <tr>
        <td width="1" bgcolor="gray">
            <img src="spacer.gif" width="1" height="1">
        </td>
        <td width="200" bgcolor="white">
            <img src="spacer.gif" width="200" height="1">
        </td>
        <td width="1" bgcolor="gray">
            <img src="spacer.gif" width="1" height="1">
        </td>
        <td width="768" bgcolor="white">
            <!-- body content goes here -->
        </td>
        <td width="1" bgcolor="gray">
            <img src="spacer.gif" width="1" height="1">
        </td>
        <td width="300" bgcolor="white">
            <img src="spacer.gif" width="350" height="1">
        </td>
        <td width="1" bgcolor="gray">
            <img src="spacer.gif" width="1" height="1">
        </td>
    </tr>
    <tr>
        <td bgcolor="gray" colspan="7">
            <img src="spacer.gif" width="1" height="1">
        </td>
    </tr>
</table>

Hey, now it works on all supported browsers. Ha ha! Ho, man! It's all coming back to me now! The hours. The days spent counting td tags in nested tables and making sure the widths of my spacer GIFs matched the widths on the td tags. Oh, and if you put a <%DOCTYPE %> tag at the top of your document (a proper one) then mysterious spaces appeared beneath the spacer GIFs. Remember that!? That was a hard lesson in how standards compliant browsers positioned inline elements.

The Decent Into True Madness

Now if only Internet Explorer supported the <layer> tag we could remove all CSS from our lives!

<layer top="300" left="25">
    I am floating on top of everything in front of your face!
</layer>

It makes me truly miss this peppered all over my JavaScript code as well:

if (document.all) {
    // Optimized for MSIE of course!
} else if (document.layers) {
    // Support Netscape 4 as well
} else if (document.getElementById) {
    // What is this new DOM? Is this "DHTML"?
} else {
    // That's right. Don't throw an error. Show a big fat, annoying alert that
    // the user is an idiot
    alert("Your browser does not support the Internet. Please open Notepad and try again.");
}

Epilogue

The days before CSS were truly dark. It was an age before time. Before fire was invented (literally if you interpret "fire" as "Firefox"). Internet Explorer was the standards compliant browser. Imagine that! Now I know you'll say "But this question was about layout, not browser support" and yet when we used tables for layout, the two were intertwined. Nowadays, I don't think browsers will even recognize presentational attributes on table related tags if you use a proper doctype, though I think basic attributes like width and height will still work. I only hope that the HTML and JavaScript snippets serve as historical context and to provide a warning to all those that follow. Tread not on these roads. For despair, war, and the gnashing of teeth are but close behind.

Answer 2

Short answer: no.

There has surely been implementations of style-related properties (presentational attributes) in browsers before CSS, but not in terms of positioning. Furthermore, going back that far would also mean going back to the time where there was no standardized DOM to use for setting properties in that sense.

Even if contemporary browsers have legacy support for presentational properties (e.g. bgcolor), I'm pretty sure the rendered appearance of HTML that by default has any sort of effect on layout (such as tables) are defined in terms of user agent CSS these days.