html - 不同大小的不同屏幕上的页面外观问题

Question

我在我的桌面上开发了我的网站。所有的 div 都在他们的位置，但是当我在笔记本电脑或更大屏幕的桌面上打开同一个页面时，所有的 div 都变得困惑。我该怎么办。即使是同样的问题也出现在放大和缩小上。我的一些 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;}