Link to home
Start Free TrialLog in
Avatar of DJWhitlock
DJWhitlockFlag for United States of America

asked on

Dreamweaver CSS layers relative alignment settings set improperly, works in IE 6, but not in IE 7

Problem is that site was built using IE 6 and with Dreamweaver relative layers and now it presents incorrectly in IE 7.  Must also be said that while building the website last year in IE v 6 (and new to Dreamweaver and layers) I used some negative top and left alignment values in order to get two of the layers (#Body and #Locations) to align properly once published in IE 6.  (no't smart).  I want it to work in both versions, and think the probllem is with #Locations and #Body in the attached CSS code snippet.  #Logo and #Menu work properly, I think.  I see differences but don't know the best end result code should be to hopefully work across several browser types and versions.  
Website is http://phcc.us 
I know this is easy, but it is Urgent so I am assigning 300 points.  Hope that is appropriate, Thanks for any help!  
#Logo and #Menu both work, #Locations and #Body align differently in different browsers.
_______________________________
#Logo {
	position:relative;
	width:780px;
	height:125px;
	z-index:1;
	left: 5px;
	background-color: #FFFFFF;
	background-image: url(/images/logobkg.gif);
}
#Menu {
	position:relative;
	width:780px;
	height:25px;
	z-index:2;
	top: 3px;
	background-color: #712A2C;
	left: 5px;
	visibility: visible;
}
#Locations {
	width:165px;
	height:480px;
	left: -296px;
	background-color: #712A2C;
	position: relative;
	top: -210px;
}
#Body {
	height:150px;
	width: 550px;
	left: 80px;
	z-index: auto;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #712A2C;
	top: -800px;
	visibility: visible;
}

Open in new window

Avatar of boro_bob
boro_bob
Flag of United Kingdom of Great Britain and Northern Ireland image

Could you post the html as well?
In the meantime this may help
#Logo {
        width:780px;
        height:125px;
        z-index:1;
        left: 5px;
        background-color: #FFFFFF;
        background-image: url(/images/logobkg.gif);
}
#Menu {
        width:780px;
        height:25px;
        z-index:2;
        top: 3px;
        background-color: #712A2C;
        left: 5px;
}
#Locations {
        width:165px;
        height:480px;
        float:left;
        background-color: #712A2C;
}
#Body {
        height:150px;
        width: 550px;
        float:left;
        z-index: auto;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #712A2C;
}

Open in new window

Avatar of DJWhitlock

ASKER

Here is the code for index.html file.  Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paramount Health Care Corporation - Rehabilitation & Healthcare facilities in Austin, Houston, San Antonio, Baytown</title>
<style type="text/css">
<!--
@import url("../../Clients/John Vinson/Current Site/mm_lodging1.css");
@import url("mm_lodging1.css");
#Logo {
	position:relative;
	width:780px;
	height:125px;
	z-index:1;
	left: 5px;
	background-color: #FFFFFF;
	background-image: url(/images/logobkg.gif);
}
#Menu {
	position:relative;
	width:780px;
	height:25px;
	z-index:2;
	top: 3px;
	background-color: #712A2C;
	left: 5px;
	visibility: visible;
}
#Locations {
	position:relative;
	width:175px;
	height:40px;
	z-index:3;
	background-color: #712A2C;
}
#Body {
	height:150px;
	width: 550px;
	left: 80px;
	z-index: 4;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #712A2C;
}
.style1 {color: #FFFFFF}
#Layer1 {
	position:relative;
	width:466px;
	height:175;
	z-index:5;
	left: 60px;
	top: 250px;
	visibility: visible;
}
#Layer2 {
	position:absolute;
	width:330px;
	height:220px;
	z-index:5;
	left: 117px;
	top: 16px;
	background-color: #DEDDDD;
}
#Layer3 {
	position:relative;
	width:330px;
	height:220px;
	z-index:5;
	left: 1px;
	top: 1px;
	visibility: visible;
}
#Layer4 {
	position:absolute;
	width:390px;
	height:90px;
	z-index:5;
	left: 380px;
	top: 9px;
}
#Layer5 {
	position:relative;
	width:358px;
	height:18px;
	z-index:5;
	left: 8px;
	top: 0;
}
.style6 {
	font-size: 16px;
	font-weight: bold;
}
#leftvert {
	position:absolute;
	width:184px;
	height:492px;
	z-index:7;
	left: 4px;
	top: 149px;
	visibility: visible;
}
#slides {
	position:relative;
	width:200px;
	height:115px;
	z-index:9;
	left: 90px;
	top: 200px;
	visibility: visible;
}
#backgray {
	position:absolute;
	width:600px;
	height:479px;
	z-index:6;
	left: 185px;
	top: 157px;
	visibility: visible;
	background-color: #DEDDDD;
}
#badytext {
	position:absolute;
	width:482px;
	height:182px;
	z-index:8;
	left: 250;
	top: 414px;
	visibility: visible;
}
-->
body
{
background-image:url(gradient.gif);
background-repeat:repeat-y;
background-position:top left;
}
#Layer6 {
	position:absolute;
	width:226px;
	height:23px;
	z-index:10;
	left: 538px;
	top: 103px;
}
.Arial12bold {
font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;
}
.style8 {font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<div align="center">
<body>
<div id="Logo"> 
  <div align="left"><img src="images/Paramountlogo.gif" width="360" height="106" />
    <div class="bodyText style6" id="Layer5">REHABILITATION &amp; HEALTHCARE CENTERS </div>
  </div>
</div>
<div id="Menu">
  <table width="770" border="0">
    <tr>
      <td width="121" class="navText"><div align="center" class="navText"><a href="index.html">HOME</a></div>        <div align="center"></div></td>
      <td width="168" class="navText"><div align="center"><a href="services.html">SERVICES &amp; AMENITIES</a> </div></td>
      <td width="172" class="navText"><div align="center"><a href="skillednursing.html">SKILLED NURSING</a> </div></td>
      <td width="184" class="navText"><div align="center"><a href="admissions.html">ADMISSION PROCESS</a> </div></td>
      <td width="103" class="navText"><div align="center"><a href="contactus.html">CONTACT US</a></div></td>
    </tr>
  </table>
</div>
<div id="slides">
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="200" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="PHCCslides.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="PHCCslides.swf" quality="high" bgcolor="#ffffff" width="300" height="200" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />  
</object>
</div>
<div id="Locations">
  <table height="411" border="0">
    <tr>
      <td height="53" class="BodytTitles style1">Locations<a href="westoaksaus.html"></a></td>
    </tr>
    <tr>
      <td height="50" class="BodytTitles style1"><a href="westoaksaus.html" class="navText">West Oaks in Austin</a></td>
    </tr>
    <tr>
      <td height="50" class="BodytTitles style1"><p><a href="baytown.html"></a><a href="baytown.html" class="navText">RHCC in Baytown</a></p></td>
    </tr>
    <tr>
      <td height="41" class="BodytTitles style1"><a href="paramounthou.html" class="navText">Paramount in Houston</a></td>
    </tr>
    <tr>
      <td height="39" class="navText"><a href="thepointe.html" class="style1">The Pointe in Webster </a></td>
    </tr>
    <tr>
      <td height="41" class="navText"><a href="westoakshou.html" class="style1">West Oaks </a><a href="westoakshou.html" class="style1"> in Houston</a></td>
    </tr>
    <tr>
      <td height="41" class="navText"><a href="westwood.html" class="style1">Westwood  in Houston</a></td>
    </tr>
    <tr>
      <td height="48" class="navText"><a href="mysticpark.html" class="style1">Mystic Park  in San Antonio</a></td>
    </tr>
    <tr>
      <td height="28" class="navText"><a href="paramountsa.html" class="navText">Paramount  in San Antonio</a></td>
    </tr>
  </table>
</div>
<div id="Body">
  <p align="left">Paramount Rehabilitation and Healthcare Centers are designed to provide high quality rehabilitation and skilled care for medically complex patients. As part of our continuum of care, we also provide long-term services for geriatric patients with chronic issues.</p>
  <p align="left">Patients at our centers benefit from a team approach utilizing the experience of our physician, nursing, administration and rehabilitation staff.</p>
  <p align="left">We would like to extend an open invitation for you to come to one of our centers and spend some time with our trained professionals.</p>
</div>
</div>
</body>
</html>

Open in new window

Tried your code above and promoted it to html://phcc.us and its not quite right yet.  And it hosed it for IE6 by placing #Locaitons at extreme left of screen with #Body snugged up to #Locaitons .  For IE7 it looks like I just need a Top: value because both #Body and #Locations and partially hidden up under that #Menu element that is correctly placed.
I'll guess with adding that, and also, do I need to call out a z-index: value like in the correctly working items?
Sorry.  My mistake refreshing the screen in IE 7.  The code I tried above did have the exact same result in both versions of IE, which is great news.  Please go review if you like at http://phcc.us/review.html.  And please find attached  code for the .html for that same page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paramount Health Care Corporation - Rehabilitation & Healthcare facilities in Austin, Houston, San Antonio, Baytown</title>
<style type="text/css">
<!--
@import url("../../Clients/John Vinson/Current Site/mm_lodging1.css");
@import url("mm_lodging1.css");
#Logo {
        width:780px;
        height:125px;
        z-index:1;
        left: 5px;
        background-color: #FFFFFF;
        background-image: url(/images/logobkg.gif);
}
#Menu {
        width:780px;
        height:25px;
        z-index:2;
        top: 3px;
        background-color: #712A2C;
        left: 5px;
}
#Locations {
        width:165px;
        height:480px;
        float:left;
        background-color: #712A2C;
}
#Body {
        height:150px;
        width: 550px;
        float:left;
        z-index: auto;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #712A2C;
}
.style1 {color: #FFFFFF}
#Layer1 {
	position:relative;
	width:466px;
	height:175;
	z-index:5;
	left: 60px;
	top: 250px;
	visibility: visible;
}
#Layer2 {
	position:absolute;
	width:330px;
	height:220px;
	z-index:5;
	left: 117px;
	top: 16px;
	background-color: #DEDDDD;
}
#Layer3 {
	position:relative;
	width:330px;
	height:220px;
	z-index:5;
	left: 1px;
	top: 1px;
	visibility: visible;
}
#Layer4 {
	position:absolute;
	width:390px;
	height:90px;
	z-index:5;
	left: 380px;
	top: 9px;
}
#Layer5 {
	position:relative;
	width:358px;
	height:18px;
	z-index:5;
	left: 8px;
	top: 0;
}
.style6 {
	font-size: 16px;
	font-weight: bold;
}
#leftvert {
	position:absolute;
	width:184px;
	height:492px;
	z-index:7;
	left: 4px;
	top: 149px;
	visibility: visible;
}
#slides {
	position:relative;
	width:200px;
	height:115px;
	z-index:9;
	left: 90px;
	top: 200px;
	visibility: visible;
}
#backgray {
	position:absolute;
	width:600px;
	height:479px;
	z-index:6;
	left: 185px;
	top: 157px;
	visibility: visible;
	background-color: #DEDDDD;
}
#badytext {
	position:absolute;
	width:482px;
	height:182px;
	z-index:8;
	left: 250;
	top: 414px;
	visibility: visible;
}
-->
body
{
background-image:url(gradient.gif);
background-repeat:repeat-y;
background-position:top left;
}
#Layer6 {
	position:absolute;
	width:226px;
	height:23px;
	z-index:10;
	left: 538px;
	top: 103px;
}
.Arial12bold {
font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;
}
.style8 {font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<div align="center">
<body>
<div id="Logo"> 
  <div align="left"><img src="images/Paramountlogo.gif" width="360" height="106" />
    <div class="bodyText style6" id="Layer5">REHABILITATION &amp; HEALTHCARE CENTERS </div>
  </div>
</div>
<div id="Menu">
  <table width="770" border="0">
    <tr>
      <td width="121" class="navText"><div align="center" class="navText"><a href="index.html">HOME</a></div>        <div align="center"></div></td>
      <td width="168" class="navText"><div align="center"><a href="services.html">SERVICES &amp; AMENITIES</a> </div></td>
      <td width="172" class="navText"><div align="center"><a href="skillednursing.html">SKILLED NURSING</a> </div></td>
      <td width="184" class="navText"><div align="center"><a href="admissions.html">ADMISSION PROCESS</a> </div></td>
      <td width="103" class="navText"><div align="center"><a href="contactus.html">CONTACT US</a></div></td>
    </tr>
  </table>
</div>
<div id="slides">
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="200" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="PHCCslides.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="PHCCslides.swf" quality="high" bgcolor="#ffffff" width="300" height="200" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />  
</object>
</div>
<div id="Locations">
  <table height="620" border="0">
    <tr>
      <td height="22" class="BodytTitles style1">&nbsp;</td>
    </tr>
    <tr>
      <td height="65" align="left" valign="middle" class="navText"><a href="westoaksaus.html" class="navText">West Oaks Rehabilitation and Healthcare Center at Austin</a></td>
    </tr>
    <tr>
      <td height="69" align="left" valign="middle" class="navText"><p><a href="baytown.html"></a><a href="westoaksaus.html" class="navText">The Rehabilitation and Healthcare Center </a><a href="baytown.html" class="navText"> at Baytown</a></p></td>
    </tr>
    <tr>
      <td height="60" align="left" valign="middle" class="navText"><a href="paramounthou.html" class="navText">Paramount </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center </a><a href="paramounthou.html" class="navText">at Pasadena</a></td>
    </tr>
    <tr>
      <td height="66" align="left" valign="middle" class="navText"><a href="thepointe.html" class="style1">The Pointe </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center </a>at<a href="thepointe.html" class="style1"> Webster </a></td>
    </tr>
    <tr>
      <td height="69" align="left" valign="middle" class="navText"><a href="westoakshou.html" class="style1">West Oaks </a><a href="westoakshou.html" class="style1"> </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center </a><a href="westoakshou.html" class="style1">at Houston</a></td>
    </tr>
    <tr>
      <td height="69" align="left" valign="middle" class="navText"><a href="westwood.html" class="style1">Westwood  </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center at </a><a href="westwood.html" class="style1"> Houston</a></td>
    </tr>
    <tr>
      <td height="83" align="left" valign="middle" class="navText"><a href="mysticpark.html" class="style1">Mystic Park  </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center</a></td>
    </tr>
    <tr>
      <td height="97" align="left" valign="middle" class="navText"><a href="paramountsa.html" class="navText">Paramount  </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center </a><a href="paramountsa.html" class="navText">at San Antonio</a></td>
    </tr>
  </table>
</div>
<div id="Body">
  <p align="left">Paramount Rehabilitation and Healthcare Centers are designed to provide high quality rehabilitation and skilled care for medically complex patients. As part of our continuum of care, we also provide long-term services for geriatric patients with chronic issues.</p>
  <p align="left">Patients at our centers benefit from a team approach utilizing the experience of our physician, nursing, administration and rehabilitation staff.</p>
  <p align="left">We would like to extend an open invitation for you to come to one of our centers and spend some time with our trained professionals.</p>
</div>
</div>
</body>
</html>

Open in new window

Hi, I have taken the liberty of re-writing your html and styles a bit. I've put some comments in the code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paramount Health Care Corporation - Rehabilitation & Healthcare facilities in Austin, Houston, San Antonio, Baytown</title>
<style type="text/css">
<!--
@import url("http://phcc.us/Clients/John Vinson/Current Site/mm_lodging1.css");
@import url("http://phcc.us/mm_lodging1.css");
#Logo {
        width:780px;
        height:125px;
        background-color: #FFFFFF;
        background-image: url(http://phcc.us/images/logobkg.gif);
}
#Menu {
        width:780px;
        height:25px;
        top: 3px;
        background-color: #712A2C;
}
#Locations {
        width:165px;
        height:620px; /* Changed height to same as table */
        float:left;
        background-color: #712A2C;
}
#Body {
        height:150px;
        width: 250px; /* Changed width to create 2 column layout with Slides next to it */
        float:left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #712A2C;
		padding: 20px 0px 0px 20px;
}
#Wrapper
{
	width:780px;
	margin: 0px auto;
}
 
.style1 {color: #FFFFFF}
#Layer1 {
	position:relative;
	width:466px;
	height:175;
	z-index:5;
	left: 60px;
	top: 250px;
	visibility: visible;
}
#Layer2 {
	position:absolute;
	width:330px;
	height:220px;
	z-index:5;
	left: 117px;
	top: 16px;
	background-color: #DEDDDD;
}
#Layer3 {
	position:relative;
	width:330px;
	height:220px;
	z-index:5;
	left: 1px;
	top: 1px;
	visibility: visible;
}
#Layer4 {
	position:absolute;
	width:390px;
	height:90px;
	z-index:5;
	left: 380px;
	top: 9px;
}
#Layer5 {
	position:relative;
	width:358px;
	height:18px;
	z-index:5;
	left: 8px;
	top: 0;
}
.style6 {
	font-size: 16px;
	font-weight: bold;
}
#leftvert {
	position:absolute;
	width:184px;
	height:492px;
	z-index:7;
	left: 4px;
	top: 149px;
	visibility: visible;
}
#slides {
	width:200px;
	height:115px;
	float:left;
	margin:20px;
}
#backgray {
	position:absolute;
	width:600px;
	height:479px;
	z-index:6;
	left: 185px;
	top: 157px;
	visibility: visible;
	background-color: #DEDDDD;
}
#badytext {
	position:absolute;
	width:482px;
	height:182px;
	z-index:8;
	left: 250;
	top: 414px;
	visibility: visible;
}
-->
body
{
background-image:url(http://phcc.us/gradient.gif);
background-repeat:repeat-y;
background-position:top left;
}
#Layer6 {
	position:absolute;
	width:226px;
	height:23px;
	z-index:10;
	left: 538px;
	top: 103px;
}
.Arial12bold {
font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;
}
.style8 {font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
 
<body>
<!-- Moved div below to inside the body tag. You can't have anything outside the body tag -->
<!-- Removed the align=center and gave it a id so we can style it properly -->
<div id="Wrapper">
<div id="Logo"> 
  <div align="left"><img src="http://phcc.us/images/Paramountlogo.gif" width="360" height="106" />
    <div class="bodyText style6" id="Layer5">REHABILITATION &amp; HEALTHCARE CENTERS </div>
  </div>
</div>
<div id="Menu">
  <table width="770" border="0">
    <tr>
      <td width="121" class="navText"><div align="center" class="navText"><a href="index.html">HOME</a></div>        <div align="center"></div></td>
      <td width="168" class="navText"><div align="center"><a href="services.html">SERVICES &amp; AMENITIES</a> </div></td>
      <td width="172" class="navText"><div align="center"><a href="skillednursing.html">SKILLED NURSING</a> </div></td>
      <td width="184" class="navText"><div align="center"><a href="admissions.html">ADMISSION PROCESS</a> </div></td>
      <td width="103" class="navText"><div align="center"><a href="contactus.html">CONTACT US</a></div></td>
    </tr>
  </table>
</div>
 
<div id="Locations">
  <table height="620" border="0">
    <tr>
      <td height="22" class="BodytTitles style1">&nbsp;</td>
    </tr>
    <tr>
      <td height="65" align="left" valign="middle" class="navText"><a href="westoaksaus.html" class="navText">West Oaks Rehabilitation and Healthcare Center at Austin</a></td>
    </tr>
    <tr>
      <td height="69" align="left" valign="middle" class="navText"><p><a href="baytown.html"></a><a href="westoaksaus.html" class="navText">The Rehabilitation and Healthcare Center </a><a href="baytown.html" class="navText"> at Baytown</a></p></td>
    </tr>
    <tr>
      <td height="60" align="left" valign="middle" class="navText"><a href="paramounthou.html" class="navText">Paramount </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center </a><a href="paramounthou.html" class="navText">at Pasadena</a></td>
    </tr>
    <tr>
      <td height="66" align="left" valign="middle" class="navText"><a href="thepointe.html" class="style1">The Pointe </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center </a>at<a href="thepointe.html" class="style1"> Webster </a></td>
    </tr>
    <tr>
      <td height="69" align="left" valign="middle" class="navText"><a href="westoakshou.html" class="style1">West Oaks </a><a href="westoakshou.html" class="style1"> </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center </a><a href="westoakshou.html" class="style1">at Houston</a></td>
    </tr>
    <tr>
      <td height="69" align="left" valign="middle" class="navText"><a href="westwood.html" class="style1">Westwood  </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center at </a><a href="westwood.html" class="style1"> Houston</a></td>
    </tr>
    <tr>
      <td height="83" align="left" valign="middle" class="navText"><a href="mysticpark.html" class="style1">Mystic Park  </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center</a></td>
    </tr>
    <tr>
      <td height="97" align="left" valign="middle" class="navText"><a href="paramountsa.html" class="navText">Paramount  </a><a href="westoaksaus.html" class="navText">Rehabilitation and Healthcare Center </a><a href="paramountsa.html" class="navText">at San Antonio</a></td>
    </tr>
  </table>
</div>
<div id="Body">
 
  <p align="left">Paramount Rehabilitation and Healthcare Centers are designed to provide high quality rehabilitation and skilled care for medically complex patients. As part of our continuum of care, we also provide long-term services for geriatric patients with chronic issues.</p>
  <p align="left">Patients at our centers benefit from a team approach utilizing the experience of our physician, nursing, administration and rehabilitation staff.</p>
  <p align="left">We would like to extend an open invitation for you to come to one of our centers and spend some time with our trained professionals.</p>
  
</div>
<!-- Moved the slides div after the Body tag to get rid of that gap it was creating under the menu -->
<div id="slides">
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="200" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="http://phcc.us/PHCCslides.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="http://phcc.us/PHCCslides.swf" quality="high" bgcolor="#ffffff" width="300" height="200" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />  
</object>
</div>
</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of boro_bob
boro_bob
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Wow.  How very cool of you to help to this extent.  The solution is perfect and I think people actually felt the stress level go down in here.  I will now go off and learn from your comments and new clean code.
THANK YOU SO MUCH.
Thank you so much.  Seriously.
You are welcome.

The key to layouts with div are learning how to use floats.

This site is excellent and I used to refer to it all the time when I was learning
http://css.maxdesign.com.au/floatutorial/index.htm

Good luck.