AP Div Problem ?

Question

After extensive reading and experimenting - I have finally completed my website - and it has been published!
I needed to place images exactly where I required them - not the standard Left/right/absolute etc! I then discovered AP DIV's and what a pleasure. My pages previewed perfectly on my computer using Internet Explorer as my browser. I showcased my new website to my wife on her laptop - and was hoorified to find that all of the images which were placed in AP Div's had moved and were now placed over text!
I have ascertained that this results from our different display settings (1024x768 vs 1280x768). Please save my sanity by advising how I can get around this problem. My site uses the 2 Column, Header & Footer, Liquid layout (one of the standard layouts) - can this possibly have something to do with the problem?
Thanks

Answer 1

Roy Marnewick wrote:
Hi Osgood
Many thanks for your rapid response.
I am part of the way there in understanding your proposed solution.
However - I understand basics only at this stage, and get by by
experimentation to achieve what I need. You have mentioned a "container" -
which I have seen mentioned in various documentation but do not understand
exactly what it is - or how I place one in my document!
I would be most grateful if you could :
1. tell me what it is?
2. how do I place a container in the document?
3. how do I set the relative position?
As a side issue - if these AP divs float around - how are they used usefully
if not placed in a container - or are they always meant to be in a
container?
Regards
Roy
1) A container is just a box on your page, could be a <div> or something else, a table cell, a paragraph etc.
2) You will already have many containers in your document.
3) To set the containers position to relative use css:
position: relative;
Example:
<div id="content">Some content here</div>
Set its position to relative with css:
#content {
width: 750px
margin: 0 auto;
position: relative;
Now if you want to use an AP <div> and have that AP <div> move along with the content when the browser window is widened or narrowed you have to insert the AP <div> inside the relatively positioned container,
<div id="content">
<div id="fixed">This AP <div> takes its co-ordinantes from the top left of the content box</div>
Some content here
</div>
The css:
#fixed {
position: absolute;
left: 50px;
top: 150px;
AP <divs> are really quite useless apart from the odd ocassions (like the above example) and maybe the most simplest of site constructions