Note: Navigator 4.x and up and IE 4.x and up
Prior to Navigator 4.x and Internet Explorer 4.x, one of the most commonly used HTML elements was the HTML table. With tables, you could position content in the middle of a page, create columns of data, position images.
With the introduction of CSS-P tables are not the only method used to position content, but they are still being used. Why is this? One main reason is that tables are still the best technique to use for positioning content for older browsers, and they are still one of the better techniques to use when it comes to “flowing” content into a specific section of a page, not just a single section of the page.
The best of all worlds might be the ability to use CSS-P with tables, but this is easier said then done. This second part to relative and absolute positioning demonstrates the ins and the outs of using CSS-P with tables.
First up, one thing a person might think of doing is using a table to position all content, and then use CSS-P to position content within the table. So, I created two tables, each with a text block enclosed within DIV blocks. Both DIV blocks are positioned relative to the enclosing table cell, with one set to a relative position of (0,0), and the second set to a relative position of (50,50). The code for the page is:
<table width=90% border=3> <tr><td> <DIV style="position:relative; color: blue"> Relative, 0, 0, Parent is table </DIV> </td></tr> </table> <p> <table width=90% border=3> <tr><td> <DIV style="position:relative; left: 50; top: 50; color: red"> Relative, 50, 50, Parent is table </DIV> </td></tr> </table>
You can see the surprising results of using relative positioning within a table by checking out the page. Notice that both text blocks are positioned relative to the tables they are enclosed within, but also notice that the relative positioning of the second DIV block actually moved it “outsite” the table parameters.
I decided to try something else. This time, I positioned the table within a DIV block that has been absolutely positioned, set the width and height of the table’s cell using CSS1, and then used relative positioning with a DIV block contained IN the table. The code for this is:
<DIV style="position:absolute; left: 50; top: 150"> <table width=90% border=3> <tr><td style="width:90%; height:100"> <DIV style="position:relative; left: 50; top: 50; color: lime"> Relative, 50, 50, Parent is table </DIV> </td></tr></table> </DIV>
Well, interesting results here, as you can see by looking at the page and results that differ between Navigator and IE. For IE, the contents are positioned relative to the table, and the table height is set to 100 pixels in height a width of 90% page size. However, the height style attribute is not used within Navigator, and additionally, the font style applied to all DIV blocks is not applied to the inner DIV block. The latter happens because the DIV block style is applied to all DIV blocks at the document level, and the inner DIV block is now contained within a table which is contained within another DIV block. The only style that is applied to the inner block is the one applied as an inline style.
What other damage can I do? Well I created an absolutely positioned DIV block containing a table containing another absolutely positioned DIV block, and the results are even more interesting as you can see from the new page. What happened with this example, for both IE and Navigator, is that absolute positioning of an element removes the element’s height and width considerations when other content is placed on the page. Since the table is picking up its height from its contents, and the contents themselves are not participating in normal page layout, you get a squished table row. The table is wide enough only because its width has been set using the old style “width” attribute:
<DIV style="position:absolute; left: 50; top: 50"> <table width=90% border=3> <tr><td > <DIV style="position:absolute; left: 50; top: 50; color: magenta"> absolute, 50, 50, Parent is table </DIV> </td></tr></table> </DIV>
Wait, wait! I’m not done twisting this one around. What happens if I remove the width attribute of the table. Take a look at the results with this page. Now, this is really interesing. First, for Navigator the contents do show, with a little bitty table above and to the left. However, try the page with IE 4.x. The contents don’t show either, but they do if you click the bottom scroll bar to move the page to the left a wee bit. The results are really strange, and note that I am using IE 4.01 on Windows 95 when I get them.
I have a little trick for handling sizing of tables when the contents are absolutely positioned, and I wrote about an article about this trick for Netscape Enterprise Developer’s February issue. What I do is use a transparent 1-pixel GIF placed into the table, and set to the size I want the table cell to occupy. If I want the cell to be 200 x 200, I set the image’s width and height to 200 each, as can be seen from the next example. The code to create this is:
<table border=3> <tr><td > <img src="blank.gif" height=200 width=200> <DIV style="position:absolute; left: 50; top: 50; color: firebrick"> absolute, 50, 50, Parent is table </DIV> </td></tr></table>
Note also that IE wraps the contents to fit the table cell, but Navigator doesn’t. To get both to wrap, the DIV block should be set to the same width as the cell, adding for positioning to the left. In this case the width is set to 150, 50 for the left positioning and 150 to make a cell width of 200.
Want to see some other techniques? Well, try the page from the following code, which sets up the table separate from the table contents and uses the transparent GIF to size the table:
<table border=3 cols=4 width=400> <tr> <td > <img src="blank.gif" height=100 width=100> </td> <td > <img src="blank.gif" height=100 width=100> </td> <td > <img src="blank.gif" height=100 width=100> </td> <td > <img src="blank.gif" height=100 width=100> </td> </tr> </table> <DIV class=fonts style="position:absolute; left: 20; top: 20; width: 100; color: firebrick"> absolute, 20, 20, Parent is table </DIV> <DIV class=fonts style="position:absolute; left: 130; top: 20; width: 100; color: gray"> absolute, 20, 20, Parent is table </DIV> <DIV class=fonts style="position:absolute; left: 235; top: 20; width: 100; color: navy"> absolute, 20, 20, Parent is table </DIV> <DIV class=fonts style="position:absolute; left: 340; top: 20; width: 100; color: goldenrod"> absolute, 20, 20, Parent is table </DIV>
Another page shows the results of a table with individually positioned DIV blocks, and using the transparent GIF to size and space the table cells. The results are actually pretty good, and the code for this effect is:
<table cols=4 > <tr> <td height=100 width=100> <DIV style="position: absolute; left: 0; top: 0; width: 100"> <img src="blank.gif" height=100 width=100 align=top> </DIV> <DIV class=fonts style="position:absolute; left: 20; top: 20; width: 100; color: firebrick"> Cell One </DIV> </td> <td height=100 width=100> <DIV style="position: absolute; left: 110; top: 0; width: 100"> <img src="blank.gif" height=100 width=100 align=top> </DIV> <DIV class=fonts style="position:absolute; left: 130; top: 20; width: 100; color: gray"> Cell Two </DIV> </td> <td height=100 width=100> <DIV style="position: absolute; left: 215; top: 0; width: 100"> <img src="blank.gif" height=100 width=100> </DIV> <DIV class=fonts style="position:absolute; left: 235; top: 20; width: 100; color: navy"> Cell Three </DIV> </td> <td height=100 width=100> <DIV style="position: absolute; left: 320; top: 0; width: 100"> <img src="blank.gif" height=100 width=100> </DIV> <DIV class=fonts style="position:absolute; left: 340; top: 20; width: 100; color: goldenrod"> Cell Four </DIV> </td> </tr> </table>
Best of all with this effect, is that the table itself can be included within an absolutely positioned DIV block, positioning the entire contents, as shown in the next example page. However, view this page with Navigator and the table is not positioned. Big Heavy Sigh.
One thing I was able to get working, with both browser, and in a way I actually planned (gasp), was the example shown in this Page. In this, I created a table with two images that are positioned using DIV blocks. The positioning is relative, and I set the top position of the second image to a negative value so it would overlap the first image. The code to create this effect is:
<table width=50% border=3 align=center> <tr><td> <DIV style="position:relative;top: 100; left: 40%"> <img src="yasd.gif"> </DIV> <DIV style="position:relative; left: 40%; top: -30"> <img src="yasd.gif"> </DIV> </td></tr></table>
Notice the white space around the images? That’s because the table height is equal to the height of the two images as they are positioned in page layout terms one after the other. The use of the negative top value makes no difference with page layout, the rest of the HTML content, including the table, “sees” these two images as layered one after the other, hence the row height.
And I think that’s a good place to stop…with an example that works the way I expect, and I even know the reason why.
That’s it for Part II of absolute and relative positioning.