html - CSS根据大小定位差异

Question

我在 relative 和 absolute 定位上犯了错误，但我不知道如何清除它，我尝试更改 widht:auto & 100%，但没有任何效果。在 % 中给出宽度时，div 会在最小化时折叠。

现在页面没有放在笔记本电脑的中间(其他屏幕分辨率)。我的代码有什么问题。

html

[complete source][1] http://jsfiddle.net/X5RDL/

CSS

h1 {
    color: #fff;
        font-weight: normal;    
}
body {
    margin: 0px 10px 10px 10px;
    background: #C5DA99 url(images/img01.jpg) repeat;
    color: #787878;
        position:absolute;  
        font:15px Georgia, "Times New Roman", Times, serif; 
}
#header {
    width: auto;
    height: 100px;
        margin:15px 05px ;
    padding: 0px 50px;
    background: url(images/img02.jpg) repeat;
        position:relative;
}
#logo {
    float: right;
    width: 300px;
    margin: 0;
    padding: 13px;
    color: #FFFFFF;          
}
#menu {
    padding:30px 10px 0 30px;
         position:absolute;    
}
#menu li {
    display: inline;
      -moz-border-radius-topleft: 12px; 
      -webkit-border-top-left-radius:12px;

}
#menu li a {
    text-decoration: none;
        float:left;
        width:;
        height:20px;
    padding: 10px;
    color: black;
        font:14px Georgia, "Times New Roman", Times, serif;    
}


#menu li a:hover {
    margin-top:;
       color:#FFF;
    padding-bottom:12px; 
  text-shadow:5px 5px 5px white;
background:url(images/vline.jpg) no-repeat bottom
}

#contentbg
    {
        width:1004px;
        float:left;
            background: #FFFFFF;
    }   
#content 
      {
              padding:;
      }     
/*  contentleft  */
#contentleft
      {
        width:190px;
        float: left;
        margin:0px;
        padding:34px 0 33px 23px;
      }
/*   content middle */
#contentmid
    {
        width:500px;
        float:left;
        margin:0px;
        padding:34px 5px 33px 15px;
        background-image:url(images/vline.jpg);
        background-repeat:repeat-y; 
    }
/* content Right */
#contentright
    {
        width:240px;
        float: right;
        padding:34px 0 40px 12px;
        background-image:url(images/vline.jpg);
        background-repeat:repeat-y;
    }
/* login box */
#loginPan form
         {
               padding:5px;
               width:200px; 
               height:188px; 
              background:#FCF6E6; 
              color:#705D20; 
              position:relative; 
              border:1px dashed #BFB492; 
         }
#loginPan form label
         {
              width:91px; 
              height:22px; 
             display:block; 
             float:left;  
         }

Answer 1

具有相对定位的页面元素让您控制绝对位置它里面的子元素。

More about this

More about this link 2