How to make my website fit to all resolution?

Question

Hi all, I'm a beginner for using dreamweaver.  I've been looking for this question but I think it doesn't solve my problem. I want to make my website fit to all screen resolution. At first, I preview it at mozilla  and Internet explorer and its ok. But my friend say that she open it at her computer , Ipad it become a mess. I try to open it at public computer too and it's really such a mess.
I used dreamweaver cs6
And now my problem is:
How to set it to fit for all screen resolution?
what is the css code to make it fit to all screen resolution?
How to set normal  width and height for website?
this is how my css work:
@charset "utf-8";
.mainbody {
    background-color: #CCC;
    width: 980px;
    margin-right: auto;
    margin-left: auto;
.mainbody .header {
    height: auto;
    width: 980px;
    padding-top: 15px;
    padding-bottom: 10px;
.mainbody .menubar {
    width: 980px;
    height:auto;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
.mainbody .slider {
    width: 972px;
    height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    border: medium dotted #60F;
    margin-top: 25px;
    margin-bottom: 15px;
Please let me know is there's any mistake i've made. 
By the way , sorry for my bad English ^_^

Answer 1

Thank you for your reply ^_^
this is my website : www.favoritepumps.com
It's very very very simple right >.<
but in this website I use the dreamweaver template . few days ago I make my own use div tags and i'ts been mess and I changed it back.
and now I just want to know how to set it fit to all screen resolution and how about the width I make?
I got some information that the width shouldn't be more than 980 px is it true?
how should I write then?
I make it like this at the source code:
<div class="mainbody">
    <div class="header"><img src="images/favoritepump.png" width="500" height="80" alt="favoritepumps" /></div><!-- end .header -->
    <div class="menubar">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li>
          <div align="center"><a class="MenuBarItemSubmenu" href="#">Item 1</a>
            <ul>
              <li><a href="#">Item 1.1</a></li>
              <li><a href="#">Item 1.2</a></li>
              <li><a href="#">Item 1.3</a></li>
            </ul>
          </div>
        </li>
        <li>
          <div align="center"><a href="#">Item 2</a></div>
        </li>
        <li>
          <div align="center"><a class="MenuBarItemSubmenu" href="#">Item 3</a>
            <ul>
              <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                <ul>
                  <li><a href="#">Item 3.1.1</a></li>
                  <li><a href="#">Item 3.1.2</a></li>
                </ul>
              </li>
              <li><a href="#">Item 3.2</a></li>
              <li><a href="#">Item 3.3</a></li>
            </ul>
          </div>
        </li>
        <li>
          <div align="center"><a href="#">Item 4</a></div>
        </li>
        <li>
          <div align="center"><a href="#">Untitled Item</a></div>
        </li>
      </ul>
    </div><!-- end .sidebar -->
    <div class="slider">
      <div align="center"><img src="images/kero.jpg" width="250" height="220" alt="kero" /></div>
    </div><!-- end .slider -->
    <div class="container">
        <div class="leftbar"> </div><!-- end .leftbar-->
         <div class="rightbar"></div><!--end .rightbar -->
    </div><!-- end .container2 -->
    <div class="footer"></div><!-- end .footer -->
</div><!-- end .mainbody -->
thank you