靈活或居中的頁面HTML CSS

-1

我必須使用靈活或居中的頁面設計，即使對於800 * 600的用戶屏幕分辨率也可以工作。當我縮小頁面時，元素正在移動並改變其位置。靈活或居中的頁面是否正常？如果不是應該如何？靈活或居中的頁面HTML CSS

頁面的CSS代碼;

body { 
      margin-left: auto; 
      margin-right: auto; 
      text-align:center;} 

div.header { 
    padding-top: 1pc; 
    text-align:center; 
    width:100%; 
    color: #000000;} 

div.header h1 { 
color: #493831; 
padding-bottom: 30px; 
margin: 0;} 

div.menu { 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:100%; 
    text-align:center; 
    background:#FBB117;} 
div.menu ul{ 
    font-size:14px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 3px; 
    margin-bottom: 3px; 
    width: 100px 
    padding:0; 
    display:inline-block;} 
div.menu li{ 
    display:inline; } 
div.menu li a{ 
    text-decoration:none; 
    padding:7px 0; 
    width:100px; 
    background:#FBB117; 
    color:#4C4646; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff;} 
div.menu li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 


div.sidebar { 
    padding-top: 2pc; 
    margin-right: 15%; 
    margin-left: 15px; 
    text-align:center; 
    float: right; 
    width: 200px; 
    color: #000000; 
    list-style:none; } 
div.sidebar ul{ 
    font-size:14px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 3px; 
    margin-bottom: 3px; 
    padding:0; 
    list-style: none; 
    display:inline-block; } 
div.sidebar li{ 
    display:inline; } 
div.sidebar li a{ 
    text-decoration:none; 
    padding:10px 0; 
    width:100%; 
    background:#FBB117; 
    color:#4C4646; 
    float:right; 
    text-align:center; 
    border-bottom:1px solid #fff;} 
div.sidebar li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 

div.content { 
    width:80%; 
    padding-top: 2pc; 
    text-align:left; 
    margin-left: 15%; 
    margin-right: 300px; 
    color: #000000 } 
div.content p { 
font-weight: lighter; 
color: #493831; 
padding-bottom: 30px; 
margin: 0;} 


div img.bw { 
    float:left; 
    margin-right:15px; 
    width:200px; 
    height:200px; } 

div img.map { 
    float:right; 
    margin-right:15px; 
    width:300px; 
    height:100px; } 

div.footer { 
    padding: 100px; 
    text-align:center; 
    height: 100px; 
    color: #000000 }

來源

2012-04-18 user1332075

http://stackoverflow.com/questions/10195852/flexible-centered-page是不是這個相同的問題？ – Ghokun 2012-04-18 06:11:47

你錯過了CSS的第一部分，沒有提供HTML，而且你的問題還不清楚。元素如何移動？哪些元素？您需要提供[jsFiddle]（http://jsfiddle.net）或其他演示。 – 2012-04-18 06:15:46

有點有點但我不確定一箇中心和靈活的頁面是如何。我把頁面縮小一些，一切都可以改變他們的位置。對於靈活或居中的頁面是否正常？謝謝。 – user1332075 2012-04-18 06:16:10