Layers and absolute positioning

Movable layers with browser resize

[TheSeoGuy]

Is there a way to have a layer on a page that is exactly lined up where you want it, but to also have the entire page centered? We have this set up, but anytime we change our resolution or adjust the browser size, the layer stays exactly where it is while the content gets moved around causing the layout to display incorrectly. Can we get the layer to move with the page content so that it is always correctly displayed?

Thanks in advance!

[Span]

You could use percentages:

position:absolute;
left:10%;
top:50px;
width:70%;

[TheSeoGuy]

Span,

we tried percents, but the ratio at which they changed compared to tables was not the same. It still caused our layout to change.

[Span]

Ohh, tables.. well if your page layout is in one 'main' table with a fixed width you could put that table in a relative positioned div and then put your layer in there with an absolute position.

div#page {
position:relative;
width:760px;
margin:0 auto;
}
div#yourlayer {
position:absolute;
left:100px;
top:100px;
width:200px;
height:200px;
}
<div id="page">
<table>
entire page in here
</table>
<div id="yourlayer">
</div>
</div>

[TheSeoGuy]

Span,

This works perfectly!

Thank you very much!