TechNote

Using layers and tables for page layout

Layers and layout tables are two ways of controlling the placement of objects on a page. Using both methods together can prove difficult, but should work smoothly if the following guidelines are kept in mind:

	Absolute positioning Layers are absolutely positioned a certain number of pixels from the top left corner of the page. Tables are simply aligned left, center or right horizontally, in the order they are placed on the page. When the alignment of the table is set to the browser default or aligned left, then layers positioned over or around tables should retain their correct positions.
	Center alignment If a table is center-aligned or right-aligned within the document, then its position relative to the top left of the browser window will depend on the size of the browser window. So, the placement of any layers in relation to such a table cannot be controlled. However, layers can also be centered with the Center Layers extension, by Michael Davis, available from the Macromedia Dreamweaver Exchange. A centered layer in relation to a centered table may work for some designs.
	Setting margins to 0 When a page design relies on the absolute positioning of some of its elements, the margins for the document should generally be set to 0. Otherwise, different browsers may add different amounts of default margin space around the left and top of the page and possibly misalign a carefully-positioned design. (Choose Modify> Page Properties, then enter 0 into the Left Margin, Top Margin, Margin Width, and Margin Height text boxes.)
	Turning off Invisible Elements When creating designs that have layers placed over or near tables, invisible elements should be turned off. In Dreamweaver 4, choose View > Visual Aids and deselect Invisible Elements. In Dreamweaver 3, choose View and deselect Invisible Elements.
	Netscape Resize Fix When using layers, always use the Netscape Resize Fix. To add or remove the fix to your document, Choose Commands > Add/Remove Netscape Resize Fix. Without this added JavaScript, the layers in a page will move from their fixed positions when a browser window is resized in Netscape. SeeWhy does text in a layer shift when using Netscape? (TechNote 13564) for more information.
	Tables in layers Stable in most mainstream browsers, the frequently-used combination of a table inside of a layer is a preferred method of Web design. For an example of a table inside of a layer, see Example 1.
	Layers in tables Placing a layer within a table may be problematic in Netscape.

Additional information
For more information on layers, see:

	Dynamic Layers section of the Dreamweaver Support Site
	Why do layers inserted in timelines break apart in Internet Explorer on the Macintosh?(TechNote 14572)

For more information about tables, see:

	Using Tables to Present Content Overview section of the Dreamweaver Support site
	Why does a table inside a layer expand to the width of the browser window? (TechNote 13563).