You can absolutely position elements relative to a container element instead of the viewport by surrounding all of the absolutely positioned content with a relatively positioned element. Example:
div#container { position: relative; margin: 0 auto; }With that, you can set dimensions on and center the container element and all of your absolutely positioned content inside of it will be absolutely positioned relative to the
div#container element (instead of the viewport).
Note that you DO need to set the dimensions since they will effectively be zero by zero because absolutely positioned content is removed from the normal document flow and the container element will thus not take into account all of the elements it “contains” to define its dimensions dynamically. This means that you need to explicitly specify exactly how wide and tall your container element should be for it to be drawn at all. If you have trouble seeing its boundaries, assign it a noticeable background color.
Note also that in order for this technique to work, you’re probably going to need to fix some errors in your code since it’s
invalid. Most critically, you need a
document type declaration; you seem to be using XHTML, but the declaration indicating that the document is in fact XHTML is missing. As a result, your document is being rendered in backward‐compatibility (or quirks) mode. In quirks mode, the browser intentionally renders the page incorrectly in an attempt to display poorly coded legacy documents as originally intended.
I briefly experimented with your code using Firefox’s
Web Developer Extension and couldn’t get the technique I described to work, so I assume that your invalid code will need to be fixed first. Make sure that you validate the document after you’ve added a doctype declaration so that you can see all of the errors that need fixing. Additionally, if you still don’t comprehend how the technique works, try looking up “making the absolute relative” in a Web search.
This post has been edited by Arbitrator: 16 Dec, 2006 - 04:54 AM
| 