AP Div positioning

[MASP]

hi i'm new enough to web design and have made a site with 2 ap divs for positioning images on my header. it all looked lovely on my laptop but when i checked it out on a 24 inch monitor the positioning was all over the place , heres my css

#apDiv1 {

position:absolute;
width:308px;
height:174px;
z-index:1;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 30px;
left: 179px;
top: -14px;
}
#apDiv2 {
position:absolute;
z-index:1;
left: 727px;
top: -190px;
width: 385px;
height: 220px;
}

[Eye for Video]

That's because of the absolute positioning... it's absolute!
Using this type of declared positioning is really not a very good idea for general page layout.
http://apptools.com/examples/pagelayout101.php
In the long run it's much better to learn page layout using CSS.
http://www.w3schools.com/css/default.asp
Best wishes,
Eye for Video
www.cidigitalmedia.com

[aj_nsc]

Gotta be careful, Eye for Video. Absolute positioning is a fantastic CSS technique, you just have to be careful about when/how you use it. It's rarely ever a good idea to use position: absolute to position elements relative to the body (I know that sounds contradictory, but it's not).

To the OP, take you time and read up to learn what the different methods of positioning actually are and what they each do. They all have their uses, but, especially newcomers to CSS, you have to be careful that you don't use them unnecessarily.

W3Schools tutorials are a great way to learn about them.

[Eye for Video]

Oh I don't doubt that absolute positioning is a fantastic technique... it's just not a very good technique for general page layout... expecially for inexperienced developers.
To the OP, perhaps the most common mistake when using a declared position is failure to understand the "parent" rule. Assigning a declared position to a Web page element can result in 2 completely different displays depending on whether or not the parent of the element also has a declared position.
So for example, the 2 divs you show above could display completely differently inside a parent which also has a declared position, then if you just display as you have coded. What's missing from above is the CSS for the parent.
As a review... from an old post:

One more thing about positioning. z-indexing only works with elements that have a declare position like absolute or relative, and how that element reacts to a declare position will depend on whether or not it's parent element also has a declare position.
So

Code:
#flash {
z-index:5;
}
will not work without ALSO giving it a declare position.
But the actual display of #flash will very depending on whether or not it's parent container (<div>) also has a declared position.

That is, if it's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.

So be sure to give a declared position to both the parent and the child <div>.

Example page using declared positions and z-indexing to sandwich Flash between 2 layers of text:
http://www.cidigitalmedia.com/tutorials/flash_div.html
View the source code or copy it and practice by changing z-index and positions.

Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
More info here:
http://www.w3schools.com/css/css_positioning.asp
http://www.w3schools.com/css/pr_pos_z-index.asp

Skip the z-index part if you want but notice how the "parent rule" works.
Best wishes,
Eye for Video
www.cidigitalmedia.com