Divs are shifting after inserting spry menu bar

Question

I have tried so much that it has driven me crazy. Initailly I created this site by APdivs and it came out perfect and worked great, except it was not fluid and looked bad on bigger browser and screen size. I decided to change it to fluid way. Now I am in bad shape as soon as I put a horizontal spry menu bar. it shifts the columns to the left and leaves a blank space next to the column 3. I am out of idea, how to fix it. As soon as I take the menu bar out, it works perfect. and columns are stretched to the end on both sides.
Here is the link of test page
www.hpbsurgery.net
This is what I have tried-nothing worked
put menu bar in container
put menu bar in header div
Put mebu bar in a horizontal div inside header div.
changed the size and dimension of menu bar
Any help would be greatly appreciated as I am running out of time.
Thanks much all....

Answer 1

Thanks very much for your help. I just wanted to mention one thing which I discovered this am by accident out of frustration. Originally, I was trying to control the size of the 3 columns with external CSS and it was messing up after inserting menu bar. I wrote directly in the code this am to exactly define the size besides in my CSS. AND............it fixed the problem and stretched the columns to the end on both side and sizes were appropriate, I am still not sure why did it happen.
I am not a professional and trying to build my own site as I have interest in web design, but this is first time with DW.
I really appreciate your help and suggestion about the code.
Thanks a lot, 
Date: Wed, 26 Sep 2012 12:46:19 -0600
From: [email protected]
To: [email protected]
Subject: Divs are shifting after inserting spry menu bar 
    Re: Divs are shifting after inserting spry menu bar 
    created by Nancy O. in Dreamweaver General - View the full discussion 
You appear confused about how to use CSS classes and IDs.  Classes (.className) can be used multiple times in layouts as for re-usable styles.  IDs (#IDName) can be used only one time per page -- as for layout regions or when JavaScript is needed to act upon it.  Try copying and pasting this code into a new blank page.  Hopefully it will make more sense than what you have now. 
<!NEW LAYOUT> 
body  
#header
#horizontalmenu {
min-height: 43px;
width: 100%;
overflow: hidden;
margin: 0px;
#leftbar {
background-color: aqua;
float:left;
width: 18%; /*combined width and padding = 22%*/
padding:2%;
#middlebar {
background-color: white;
float:left;
width: 52%; /*combined width and padding = 56%*/
padding:2%;
#rightbar    {
background-color: green;
color:white;
float:right;
width: 18%; /*combined width and padding = 22%*/
padding:2%;
#credential
#footer {
background-color: maroon;
width: 100%;
color:white;
padding:2%;
#header
[Item 2 | #]
[Item 3 | #]
[Item 3.1 | #]
[Item 3.1.1 | #]
[Item 3.1.2 | #]
[Item 3.2 | #]
[Item 3.3 | #]
[Item 4 | #]
<!END #HEADER>
#leftbar
#middlebar
#rightbar
#credential
#footer
  Nancy O. 
     Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/4729585#4729585
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4729585#4729585
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4729585#4729585. In the Actions box on the right, click the Stop Email Notifications link.
     Start a new discussion in Dreamweaver General by email or at Adobe Community
  For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.