Absolute div screen resizing question

[silentnetnz]

hi, the current project im working on has been designed so that the content of the page stays in the center of the browser window at all times when it is resized. The problem is that i created a few layers ( <div> ) that I have set to absolute positioning but obviously the layers stay put while the main content moves behind when the browser is resized. This is not what i want at all. I need the layers to follow a fixed position with the main content when the browser is resized but im not sure how to do this or even if this is possible.

[edited by: tedster at 8:01 am (utc) on Mar. 10, 2007]

[Robin_reala]

Absolutely positioned elements try to get their co-ordinates for the closest positioned ancestor and only if there isn’t one do they fall back to positioning according to the document itself. An element is classed as positioned if it has a value for position other than static (the default). So in this case all we need to do is give your main content div position relative:

#main_content { position: relative; }

Your absolutely positioned children will now position themselves according to the top left corner of this element.

[silentnetnz]

I have just added the #main_content { position: relative; } into my css script then i added <div id="main_content"> at the beginning of my content and a </div> at the end. I then loaded the web page and the div layers display until I try to resize the browser window, then they dissapear and wont show again unless I reload the page. Any idea's where I might be going wrong?

[Robin_reala]

Ah sorry, didn’t make myself clear enough. I meant to apply position:relative to the div you’ve given a width to and centered.

[Robin_reala]

If you replace the <center> element you’re using with a <div id="main_content"> then you can apply the following CSS which should work:

#main_content {
/* make absolutely positioned children calculate their co-ordinates from this */
position: relative;
/* centre the site */
width: 775px;
margin: 0 auto;
}

[silentnetnz]

thankyou so much for your help :) I entered the code above and it works like magic!
But... I just tried it in internet explorer (the newest version) and for some reason the main content stays to the left when the screen is resized. But in mozilla firefox it works perfectly. Blooming internet explorer im always having problems with getting things to work with it!

[birdbrain]

The probable answer to this last problem can be found here...

[webmasterworld.com ]

birdbrain