Dreamweaver CS3 Div Alignment Problems.

Question

I have been building a website on my new MacBook. I have it
just about done so I uploaded it to my web host to check out the
appearance. It looks great on my Mac, but I checked it on my
parents PC and it looked terrible. Being a new Mac user, I thought
it was something going on with the operating systems, but I checked
it on a Mac deskop and the alignment was still messed up. On the
Mac desktop it is too far to the left and on the PC it is too far
to the right. This is the link to the site:
http://www.potomacsouth.com/Home.html
You can click View>Source to see the code.
I noticed if you drag the window to a different size the
images behind the div move, but the div stays in place. Is there
some kind of code or something that I can do to make it stay in the
designated area on every computer regardless of settings?
Thanks.

Answer 1

evansdb78 wrote:
> I noticed if you drag the window to a different size the
images behind the div
> move, but the div stays in place. Is there some kind of
code or something that
> I can do to make it stay in the designated area on every
computer regardless of
> settings?
Thats because you are using Absolutely Positioned
<divs> so they stay...
well.... Absolutely Positioned i.e., they WILL NOT move as
you increase
or decrease the width of the browser window.
Solution:
Open your page and go to code view
FIND THIS PIECE OF CODE:
<div align="center"><img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832" height="558" /><br />
CHANGE IT TO:
<div style="position: relative; width: 832px; margin: 0
auto;">
<img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832"
height="558" /><br />
NOW FIND YOUR ABSOLUTELY POSITIONED <DIV> CODE:
<div id="apDiv2">
<p class="style6"><u><span
class="style8">Welcome</span></u><span
class="style8">!</span></p>
<p align="left" class="style5"> Welcome to
PotomacSouth.com where
you can leave your work and worries on the beach. Whether you
are
looking to get in on the fishing action Maryland and Virginia
waters
have to offer, or take a tour to one of our destinations via
the water
Potomac South can get you there. We offer tours of St. George
Island
and its surrounding waters including a look at what the local
fish nets
have caught, stop and see the Lighthouse, and two state
parks, Historic
St. Mary’s City, and Point Lookout. If food is on your
mind take an
evening cruise to catch a bite to eat at The Mooring
Restaurant. If you
have any questions or are interested in a trip today give
Captain Dan a
call or email through our “Contact Us”
link.</p>
</div>
MOVE IT TO DIRECTLY BETWEEN THE TWO LINES OF CODE YOU
ORIGINALLY
CHANGED. SO IT LOOKS AS BELOW:
<div style="position: relative; width: 832px; margin: 0
auto;">
<div id="apDiv2">
<p class="style6"><u><span
class="style8">Welcome</span></u><span
class="style8">!</span></p>
<p align="left" class="style5"> Welcome to
PotomacSouth.com where
you can leave your work and worries on the beach. Whether you
are
looking to get in on the fishing action Maryland and Virginia
waters
have to offer, or take a tour to one of our destinations via
the water
Potomac South can get you there. We offer tours of St. George
Island
and its surrounding waters including a look at what the local
fish nets
have caught, stop and see the Lighthouse, and two state
parks, Historic
St. Mary’s City, and Point Lookout. If food is on your
mind take an
evening cruise to catch a bite to eat at The Mooring
Restaurant. If you
have any questions or are interested in a trip today give
Captain Dan a
call or email through our “Contact Us”
link.</p>
</div>
<img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832"
height="558" /><br />
NOW FIND THE 'apDiv2' CSS IN THE HEAD SECTION OF YOUR PAGES
CODE AND
CHANGE THE 'LEFT' AND 'TOP' POSITIONING AS BELOW.
#apDiv2 {
position:absolute;
width:315px;
height:358px;
z-index:1;
left: 70px;
top: 160px;
overflow: auto;
THATS IT. IT SHOULD NOW MOVE AS YOUR BACKGROUND IMAGE MOVES