Why isn't my layout connecting divs tightly?

I am building a website, and I am having trouble with the coding. I have a Spry Menu that needs my Nivo (jquery) Slider to fit tightly underneath it, and then have the second Spry Menu (#2) fit tightly underneath the slider.
Why am I not able to push these tightly together? (my site html and spry menu html is below - CSS built into header of page)
Thanks for any insight anyone could provide!!!
SOURCE 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=utf-8" />
<title>Cache Valley ENT</title>
<meta name="keywords" content="Cache Valley ENT, ent, ear, nose, throat, allergy, allergies, symptom, congestion, treatment, clinic"/>
<meta name="description" content="Cache Valley ENT is Northern Utah's most experienced ear, nose, and throat clinic, offering treatments for your worst symptoms, including allergies." />
<meta name="identifier-url" content="http://" />
<style type="text/css">
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000;
body {
    background-color: #F1D2A6;
    background-image: url(pictures/backgroundslice.jpg);
    background-repeat: repeat-x;
#header {
    width: 900px;
#body {
    vertical-align: baseline;
    width: 725px;
    text-align: justify;
    height: 900px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-image: url(pictures/textbox/home_text.png);
    padding-top: 10px;
    padding-right: 60px;
    padding-bottom: 40px;
    padding-left: 30px;
    margin: auto;
#navbar {
    height: 40px;
    width: 696px;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-color: #000;
    border-right-color: #000;
    border-bottom-color: #000000;
    border-left-color: #000;
    margin-left: 12px;
#MenuBar2 li {
    width: 174px;
    font-family: "Arial", Arial, serif;
    color: #FFFFFF;
    font-size: 20px;
    letter-spacing:;                                    
    height: auto;
    background-image: url(pictures/images/images/spry_menu_background2.png);
    background-hover: url (pictures/images/images/hover_spry_menu_background2.png)
    padding-top: 20px;
#footer {
    font-size: 13px;
    width:800px;
    left: 50px;
    margin-top: 10px;
    padding-top: 10px;
a:link {
    color: #000;
    text-decoration: none;
a:visited {
    text-decoration: none;
    color: #000;
a:hover {
    text-decoration: underline;
    color: #666;
a:active {
    text-decoration: none;
.headerphone {
    font-size: 24px;
    text-align: center;
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="ajximagerotator.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        directionNav: true,
        controlNav: true,
        directionNavHide: false,
        captionOpacity: 1,
        prevText: '<',
        nextText: '>',
        effect: 'fade',
        pauseTime: 9000,
</script>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<!--favicon-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<!--Google Analytics Tracking Code-->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-32226035-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>
<div id="header"></div>
<div id="body">
  <table width="720" border="0">
    <tr>
      <td width="557"><img src="pictures/CVENT Logo Edit.jpg" width="300" height="147" vspace="0" align="top" /></td>
      <td width="153" nowrap="nowrap"><div class="headerphone">
        <p><strong>Cache Valley ENT</strong></p>
        <p>435.753.7880</p>
      </div></td>
    </tr>
  </table>
  <hr />
  <div id="navbar">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="home.html">Home</a></li>
      <li><a href="our_providers.html">Our Providers</a></li>
      <li><a class="MenuBarItemSubmenu" href="services.html">Services</a>
        <ul>
          <li><a href="services_entservices.html">General ENT</a></li>
          <li><a href="services_allergy.html">Allergy</a></li>
          <li><a href="services_hearing.html">Hearing</a></li>
          <li><a href="services_pediatric.html">Pediatric Services</a></li>
          <li><a href="services_asthma.html">Asthma</a></li>
          <li><a href="services_headache.html">Headache</a></li>
          <li><a href="services_facialplasticsurgery.html">Facial Plastic Surgery</a></li>
        </ul>
      </li>
      <li><a href="new_patient.html" class="MenuBarItemSubmenu">New Patient</a>
        <ul>
          <li><a href="#">Forms</a></li>
          <li><a href="#">Insurance</a></li>
        </ul>
      </li>
      <li><a href="patient_resources.html" class="MenuBarItemSubmenu">Patient Resources</a>
        <ul>
          <li><a href="patient_resources_ears.html">Ears</a></li>
          <li><a href="patient_resources_throat.html">Throat</a></li>
          <li><a href="patient_resources_noseandmouth.html">Nose and Mouth</a></li>
          <li><a href="patient_resources_headandneck.html">Head and Neck</a></li>
          <li><a href="patient_resources_cancer.html">Cancer</a></li>
          <li><a href="patient_resources_pediatric.html">Pediatric</a></li>
          <li><a href="patient_resources_featuredhealthinformation.html">Featured Health Information</a></li>
          <li><a href="patient_resources_enespanol.html">en Espa&ntilde;ol</a></li>
          <li><a href="patient_resources_aboutotolaryngology.html">About Otolaryngology</a></li>
          <li><a href="patient_resources_enthistory.html">ENT History</a></li>
        </ul>
      </li>
    </ul>
    <p> </p>
    <div class="slider-wrapper theme-default">
      <div class="ribbon"></div>
      <div id="slider" class="nivoSlider">
        <p><img src="nivo_images/walle.jpg" alt="" /> <a href="http://dev7studios.com"><img src="nivo_images/toystory.jpg" alt="" /><img src="nivo_images/nemo.jpg" alt="" /></a></p>
      </div>
    </div>
    <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a href="services_entservices.html">General ENT</a></li>
      <li><a href="services_facialplasticsurgery.html">Surgery</a></li>
      <li><a href="http://www.CacheAllergy.com" target="_blank">Allergies</a></li>
      <li><a href="http://www.wherecvhears.com">Hearing</a></li>
    </ul>
  </div>
  <div id="img">
    <h1> </h1>
    <h1> </h1>
    <h1>Welcome!</h1>
    <p> <strong>Cache Valley ENT is located in North Logan, Utah, </strong>and provides ear, nose and throat (ENT) servies to relieve the the most stubborn allergy symptoms. Cache Valley ENT serves all Cache Valley residents, Box Elder County, and even Franklin County Idaho. Our doctors, Doctor Gordon Wood, Doctor Jeffrey Bennion, Doctor James Blotter, and Lindsay Humes (PA.C.), are all trained and experienced in allergy testing and treatments to provide you a favorable experience, and to help you live the live you deserve! They have more than 75 years' combined experience in providing successful ENT treatments! Cache Valley ENT is affiliated with the MidWest ENT Associates, PLLC. <br />
      <br />
    We have a convenient location in North Logan, UT at 2380 North 400 East, inside the Cache Valley Specialty Hospital. This location houses the ENT Clinic and the Gulf South Outpatient Surgery Clinic. Hours of operation are  Monday through Thursday, 8am to 5pm, and Friday from 8am to 12noon. Call  <strong>801-753-7880</strong> to schedule an appointment. </p>
    <p><img src="pictures/our_practice.png" width="500" height="333" hspace="110" align="middle" /></p>
  </div>
  <p> </p>
  <div id="footer">
    <p> </p>
    <p>Copyright 2012  | Cache Valley ENT  |  2380 N  400 E, Suite D  |  North  Logan, Utah 84341  |  435.753.7880  | <strong> <a href="contact.html">CONTACT US</a>&#13;</strong></p>
  </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
SPRYMENUBARHORIZONTAL.CSS
@charset "UTF-8"; /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /*******************************************************************************  LAYOUT INFORMATION: describes box model, positioning, z-order  *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ul.MenuBarHorizontal{    margin: 0;    padding: 0;    list-style-type: none;    font-size: 100%;    cursor: default;    width: auto;    -moz-background-inline-policy: bounding-box;}/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ul.MenuBarActive{    z-index: 1000;}/* Menu item containers, position children relative to this container and are a fixed width */ul.MenuBarHorizontal li{    margin: 0;    padding: 0;    list-style-type: none;    font-size: 100%;    position: relative;    text-align: left;    cursor: pointer;    float: left;    background-image: url(../pictures/images/images/spry_menu_background.png);    width: 139px;    z-index: 1001;}  /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ul.MenuBarHorizontal ul{    margin: 0;    padding: 0;    list-style-type: none;    font-size: 100%;    z-index: 1020;    cursor: default;    width: 9.5em;    position: absolute;    left: -1000em;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{    left: auto;}/* Menu item containers are same fixed width as parent */ul.MenuBarHorizontal ul li{    width: 10em;}/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ul.MenuBarHorizontal ul ul{    position: absolute;    margin: -5% 0 0 95%;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{    left: auto;    top: 0;} /*******************************************************************************  DESIGN INFORMATION: describes color scheme, borders, fonts  *******************************************************************************/ /* Submenu containers have borders on all sides */ul.MenuBarHorizontal ul{ } /* Menu items are a light gray block with padding and no text decoration */ul.MenuBarHorizontal a{    display: block;    cursor: pointer;    padding: 0.5em 0.75em;    text-decoration: none;    text-align: center;    border: 0.75px solid;    border-bottom-color: #000000;    border-left: none;    border-right: none;    border-top: none;} ul.MenuBarHorizontal ul a {    text-align: left; } /* Menu items that have mouse over or focus have a blue background and white text */ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{    text-align: center;    background-image: url(../pictures/images/images/hover_spry_menu_background2.png);}/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{    text-align: center;    color: #000;} /*******************************************************************************  SUBMENU INDICATION: styles if there is a submenu under a given menu item  *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal a.MenuBarItemSubmenu{    background-repeat: no-repeat;    background-position: 95% 50%;}/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{    background-image: url(SpryMenuBarRight.gif);    background-repeat: no-repeat;    background-position: 95% 50%;    }/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{    background-repeat: no-repeat;    background-position: 95% 50%;    text-align: center;}/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{    background-image: url(SpryMenuBarRightHover.gif);    background-repeat: no-repeat;    background-position: 95% 50%;} /*******************************************************************************  BROWSER HACKS: the hacks below should not be changed unless you are an expert  *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ul.MenuBarHorizontal iframe{    position: absolute;    z-index: 1010;    filter:alpha(opacity:0.1);}/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */@media screen, projection{    ul.MenuBarHorizontal li.MenuBarItemIE    {    display: inline;    f\loat: left;    }} 

That which you have shared with us is OK. All fits neatly as per your requirement.
Perhaps it is that which you have not shared with us that could be the problem.
Gramps
PS The following may help you
Announcement: How Important is Code? A plea for new posters to help us!
Hide Details
Please don't ask a layout question (or really almost any other question) here without also giving us a look at the code on your page.
The best way to do this is to upload the page and its dependent files, and to post a link to this uploaded page.  A poor second alternative would be to paste your code into your post using the double chevron icon on the toolbar, and selecting Syntax Highlighting > Plain Text.
Without knowing what you have in your code, we cannot possibly answer anything other than a very simple question.  Save us the trouble of engaging in twenty questions to find out what you have done and just show us the code.  After all, it's what determines what happens on the page, not your screenshot or your description.
Please?
Also, if your question is one that involves database use or server-scripting, please tell us what server model (PHP, CF, etc.) and database you are using (MySQL, SQL Server, etc.), as well as the operating system and platform.  All of those details are necessary for complete troubleshooting and will help us help you through the process!
  by Murray *ACP* (04-Aug-2010)

Similar Messages

Maybe you are looking for