Issue with layout on tablet size devices

Question

Hi All,
Can anyone tell me why when the window size is reduced down or is opened on a tablet size device, that the 'maindiv' moves to the bottom of the page. I have tried changing, margins, widths, max-widths but nothing seems to work. It seems to me that the div is too wide to fit in between the 2 gold bars and this only happen when 'overflow:scroll;' comes into play when it reaches the media queries 768px. For all other sizes it works fine. This is the bit that i think is the problem, but then again i could be wrong!
@media (max-width: 768px) {
.maindiv {
          max-width:auto;
          overflow:scroll;
          margin:0;
          padding-bottom:0;
          background-image:none;
          background-color: #F4ECC5;
          border-top: 1px solid #F4ECC5;
http://www.milesfunerals.com/miles-and-daughters-diary.php

Answer 1

What if you just remove 'overflow:scroll'?
When i remove the overflow the page works but i have used this div for most of the pages throughout this site. By removing that attribute will work for this page as it only has a small amount of content but for the pages with a lot more content i will need to apply the overflow:scroll; to make the page work?
Try setting .maindiv to max-width: 95%; in the media query, see if that gets around the problem.
This didint work, all it did do was apply a scroll bar part way across page.