差异大小的差异屏幕上的页面出现问题

Question

我在我的桌面上开发了我的网站。所有divs都在它们的位置，但是当我在笔记本电脑或大屏幕桌面上打开相同页面时，所有divs都变得混乱。我做甚至同样的问题正在放大和缩小。我的一些css代码是 -

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; 
} 

我不知道是什么问题。

HTML代码

<div class="main"> 

<!--start header--> 
<div class="header"> 
    <div class="header_resize"> 
     <div class="logo"> 
      <a href="#"><img src="images/logo.jpg" width="95%" alt="Airlink" border="0" /></a> 
     </div> 
     <div class="menu"> 
      <ul> 
       <li class="active"><a href="index.html">HOME</a></li> 
       <li ><a href="#">COMPANY</a></li> 
       <li ><a href="#">SOLUTIONS</a></li> 
       <li ><a href="#">SERVICES</a></li> 
       <li ><a href="#">NEWS & EVENTS</a></li> 
       <li ><a href="#">BLOGS</a></li> 
       <li ><a href="#">CONTACTS</a></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 ><a href="#" id="li1">Managed Services</a></li> 
       <p id="servinfo1" class="servinfo"> Service Info 1 </p> 
       <li ><a href="#" id="li2">Turnkey Services</a></li> 
       <p id="servinfo2" class="servinfo">Service Info 2 </p> 
       <li><a href="#" id="li3">Value Added Sevices</a></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"><a href="#"><img src="images/menu_hosp.jpg" border="0"></a></li> 
        <li id="d2"><a href="#"><img src="images/menu_edu.jpg" border="0"></a></li> 
        <li id="d3"><a href="#"><img src="images/menu_enter.jpg" border="0"></a></li> 
        <li id="d4"><a href="#"><img src="images/menu_retail.jpg" border="0"></a></li> 
        <li id="d5"><a href="#"><img src="images/menu_health.jpg" border="0"></a></li> 
        <li id="d6"><a href="#"><img src="images/menu_real.jpg" border="0"></a></li> 
        <li id="d7"><a href="#"><img src="images/menu_tel.jpg" border="0"></a></li> 
       </ul> 
       </div> 
      </div> 
     </div> 
..... 

Answer 1

使用包装有固定宽度，以避免这些类型的问题。

<div id="wrapper"> 
// All the HTML in body 
</div> 

#wrapper{width:960px;}