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.

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.

• javascript
• html
• css

Share Improve this question Follow edited Nov 25, 2014 at 16:14 Basj asked Nov 25, 2014 at 16:08 BasjBasj 46.6k110110 gold badges459459 silver badges808808 bronze badges 16

• 12 Why? Oh dear, sweet [deity, or secular figure, of your own choice] why? Those days are not to be revisited, the migraines that those flashbacks bring back are not good for us. Or you. Or for any family, or pets, you might have. – David Thomas Commented Nov 25, 2014 at 16:09
• 2 Painful. They were painful before. – David Thomas Commented Nov 25, 2014 at 16:12
• 3 Here's one, just as an illustration how painful: <table border=0><tr><td>A</td><td><img src=spacer.gif width=30 height=1></td><td>B</td></tr></table> to have A and B separated by 30 pixels. (spacer.gif would be a 1x1 transparent gif.) Strictly for historical education, never ever again for implementation. (I had to remove the quotes for historical accuracy. The horror.) – Amadan Commented Nov 25, 2014 at 16:15
• 3 Well, basically there was 'nested tables' using various binations of 'align', 'valign' and spacer (transparent) images. Also: optimism, and the tears. So many, many tears. – David Thomas Commented Nov 25, 2014 at 16:16
• 2 @Basj the downvotes are probably due to the tears you are evoking in some people... poor them. – DRC Commented Nov 25, 2014 at 16:18

 |  Show 11 more ments

2 Answers 2

Sorted by: Reset to default 7

(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 ing 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 pliant 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 pliant 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.

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.