瀏覽器上的網站對齊中斷縮放

Question

我的網站同時經過css和html驗證，但在瀏覽器上縮放對齊中斷。我不是一個css專業版。請告訴我需要更改哪些css代碼。網站是here

這是標題欄上使用圖像的樣式。

#title { 
    height : 90px; 
    background : #f3f4f5; 
    text-decoration : none; 
    } 
    #title > img.tp { 
    float : right; 
    } 
    #title > img.redzone { 
    padding-top : 1%; 
    margin-left:15%; 
    } 
    #title > img.ctoc { 
    float : left; 
    } 
    #title > img.fp { 
    position:absolute; 
    float:left; 
    margin-left:6%; 
    margin-top:10px; 
    } 

* 這對於造型左，右列。 *

#contact_container { 
position:absolute; 
width : 15%; 
margin-left:4.5%; 
margin-top:30px; 
float:left; 
height : auto; 
padding-top:2%; 
background-image : url(img/transparent.jpg); 
} 
#contact_container > img 
{ 
    padding-left:26%; 
} 
#content_container { 
position:absolute; 
padding-top : 2%; 
margin-top:30px; 
width : 15%; 
float:right; 
margin-left : 80%; 
background-image : url(img/transparent.png); 
text-align : center; 
} 
#content_container > hr 
{ 
    width:80%; 
    border-style:groove; 
} 
#contact_container > hr 
{ 
    width:80%; 
    border-style:groove; 
} 
#content_container > ul 
{ 
    text-align:center; 
} 
#contact_container > ul 
{ 
    text-align:center; 
} 

這些是菜單和滑塊的總體造型

#gallery { 
border : #ccc solid 1px; 
background : #ffffff url(img/panel.jpg) repeat-x bottom center; 
width : 920px; 
overflow : hidden; 
} 
#menu2 { 
list-style : none; 
width : auto; 
height : 43px; 
background : #014464; 
border : #002232 solid 1px; 
margin-top : 30px; 
margin-right : auto; 
margin-bottom : 5px; 
margin-left : auto; 
padding-left : 30px; 
} 

任何形式的幫助表示讚賞。
即使是一些很好的參考文獻也會有所幫助

Answer 1

這不僅僅是放大縮小了。當瀏覽器寬度發生變化時它也會中斷。見截圖在這裏：http://imgur.com/OHiyQ

你已經有了一些彩車沿着相對/絕對定位元素的一個有趣的混合物。你最好的選擇將是剔除那些風格各異，讓在您的標記正確的順序（從左至右）的內容，然後再從那裏。

下面是一個流體寬度，三列CSS佈局的非常有用的例子，看看它是如何在那裏完成的（並閱讀附件文章），這將真正幫助您使佈局運行良好。

http://www.maxdesign.com.au/articles/css-layouts/three-liquid/

祝你好運！