page appearence problem on diff screen of diff size - html

Question

I have developed my website on my desktop.All divs are in their place but when I open the same page in a laptop or larger screen desktop all the divs are getting disordered.What should I do.even the same problem is coming on zoomin and zoom out. some of my css code is-
body {
margin:0;
padding:0;
width:100%;
color:#5f5f5f;
font:normal 12px/1.8em Arial, Helvetica, sans-serif;
}
html, .main { padding:0; margin:0; background:url(images/body_bg.jpg) repeat-x top; }
.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
/* header */
.header { margin:15; background-color:White;}
.header_resize { margin:5px auto; padding:0; width:970px;}
.header .logo { width:auto; float:left; padding:5px 0 0 25px;}
.header .menu ul { margin:38px 20px 0 2px; padding:0; float:right; width:auto; list-style:none;}
.header .menu ul li { margin:0 4px; float:left; background:url(images/menu.jpg) repeat-x top; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.header .menu ul li a { display:block; margin:0; padding:3px 8px 3px 8px; color:#5f5f5f; text-decoration:none;}
.header .menu ul li a:hover, .header .menu ul li.active a { color:#fff; background:url(images/menuover.jpg) repeat-x top; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
/* hbg */
.hbg {
background-color:transparent;
float:left;
margin:0 0 0 45px;
padding:65px 456px 0 56px;
width:137px;
height:160px;
background:#fff url(images/soluinfo.jpg) no-repeat top left;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/*solutions*/
.solu{ background-color:transparent;}
.solu_resize { margin:0 auto; padding:0; width:auto; }
.solu .smenu ul { margin:0 0 0 45px; padding:0; float:left; width:auto; list-style:none; }
.solu .smenu ul li { margin:0 0; float:left; }
.solu .smenu ul li a { display:block; margin:0; padding:0; color:#5f5f5f; text-decoration:none;}
.solu_resize img{ float:left; padding:0 0 0 0;}
/*sidebar*/
.sidebar {
margin:0 40px 0 0;
padding:0;
float:right;
width:260px;
}
/* content */
.content { padding-bottom:1px; }
.content_resize {border-top:none; }
.content .mainbar {
margin:3px 0 0 -12px;
padding:0; float:left;
border-width:1px;
border-style: solid;
border-color: Lightgray;
width:649px;
min-height:320px;
background-color:white;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.content .mainbar .article_vert {
margin:0;
padding:10px 0px 10px 10px;
float:left;
width:313px;
background-color:White;
}
I dont know what's the problem.
HTML code
<div class="main">
<!--start header-->
<div class="header">
<div class="header_resize">
<div class="logo">
<img src="images/logo.jpg" width="95%" alt="Airlink" border="0" />
</div>
<div class="menu">
<ul>
<li class="active">HOME</li>
<li >COMPANY</li>
<li >SOLUTIONS</li>
<li >SERVICES</li>
<li >NEWS & EVENTS</li>
<li >BLOGS</li>
<li >CONTACTS</li>
</ul>
</div>
<div class="clr">
</div>
</div>
</div>
<!--end header-->
<!--start mouseover info panal-->
<div class="hbg">
<div class="solu_info" id="loadinfo">
<div class="solu_head" >
<font size="3" ><b>Complete Solution For<br> Wireless Connectivity</b></font>
</div>
</div>
</div>
<div class="sidebar">
<div class="serv">
<font size="3" ><b>Services</b></font><img src="images/serv.jpg" align="right">
<hr size="0px" width="78%" color="#4AA02C" align="left" >
<ul class="sb_menu">
<li >Managed Services</li>
<p id="servinfo1" class="servinfo"> Service Info 1 </p>
<li >Turnkey Services</li>
<p id="servinfo2" class="servinfo">Service Info 2 </p>
<li>Value Added Sevices</li>
<p id="servinfo3" class="servinfo">Service Info 3 </p>
</ul>
</div>
</div>
<div class="solu">
<div class="solu_resize">
<div class="smenu">
<ul>
<li id="d1"><img src="images/menu_hosp.jpg" border="0"></li>
<li id="d2"><img src="images/menu_edu.jpg" border="0"></li>
<li id="d3"><img src="images/menu_enter.jpg" border="0"></li>
<li id="d4"><img src="images/menu_retail.jpg" border="0"></li>
<li id="d5"><img src="images/menu_health.jpg" border="0"></li>
<li id="d6"><img src="images/menu_real.jpg" border="0"></li>
<li id="d7"><img src="images/menu_tel.jpg" border="0"></li>
</ul>
</div>
</div>
</div>
.....

Answer 1

Use a wrapper with a fixed width to avoid these kind of problems.
<div id="wrapper">
// All the HTML in body
</div>
#wrapper{width:960px;}