how to fix the css for  button

You will need to move your button code from the headerFoot div to the headerMid. I would recommend enclosing this in a child <div> element with positioning defined in your CSS. Something like:

 <div id="headerReservation" class="floatRight">{insert button code here}</div>

You would then insert your social media button codes into the place where your original reservation button code and enclose them in a <span id="social"> element to keep them in one spot within the <div id=headerFoot> section.

Once you have identified the various section id's, you can then tweak the CSS location attributes to place the elements to your liking. Except for the fine-tuning, you should be able to use your existing CSS without much modification, though you will need to add a definition section for the #headerReservation id similar to:

#headerReservation {
      float: right;
      height: 25px;
      width: 200px;
      position: fixed;
}

If you don't already, you will also need a float: clear; attribute in your #content <div>. This will prevent the main content region from inheriting any float values from preceding elements.

Of course, this is just a basic guideline to nudge you in the right direction. If you have any other scripting functions that come into play, you may need to make some additional changes.