Misalignment in browser when window size changes

Question

I have two ap elements within content, one aligned to the left side of the content, the other next to it, i.e. aligned to the right side of the content.
Preview in browsers such as IE7 and firefox in full window the content expands beyond the right alignment so there is too much white space. On the left the content moves to the right. In decreased window view content shrinks and leaves right ap element going over into the body.
I want the elements of the site not to move when the window is collapsed and that when moving the lower nav bar the site just shows as in the full window (but partially).
http://www.jindasing.com/index_beta.html

Answer 1

Rule number 1 - don't use Absolutely Positioned divs unless you have a very good and specific reason to! As you're discovering absolutely positioned elements (like AP Divs) don't work the way you might think. They are absolutely positioned relative to their parent container! Often times this is your body tag. And they are a very inflexible tool which is why you shouldn't generally use them for layout.
Okay but to answer your question -
Remove this from your page:
<style type="text/css">
#ap_usp {
     position:absolute;
     width:591px;
     height:121px;
     z-index:1;
     left: 159px;
     top: 161px;
#ap_logo {
     position:absolute;
     width:409px;
     height:120px;
     z-index:2;
     left: 760px;
     top: 164px;
</style>
And in your attached stylesheet () remove the height attribute from the .header class. Like this:
.header {
     background: #516081;
     height: 100px; <- remove this
Now how does it look? Better? Then to center your image, use a CSS class to give it some padding or margins.
Hope this helps!