調整窗口大小隱藏了我的導航邊欄

Question

我有一個網站。這非常簡單，只是中間和左側的一列文字，包含指向我網頁的鏈接。當我在我的網站上調整瀏覽器窗口大小時，縮小窗口會使文本列覆蓋導航欄。雖然這對於寬屏顯示器和高分辨率的計算機來說不成問題，但對於某些人來說，這是一個問題，因爲窗口的大小，加載該頁面並找到已覆蓋導航列的文本列。在調整窗口大小時，如何讓我的導航欄隨我的文本列一起移動，而不是根本不移動，並在調整窗口大小時隱藏起來？

鏈接在一個div中，文本在不同的div中。這裏是CSS：

#links { 
position: relative; 
float: left; 
left: 18em; 
font-family: arial; 
} 
#content { 
position: relative; 
font-family: arial, helvetica; 
top: -4em; 
width: 560px; 

border-style: solid; 
border-color: 36a2c1; 
border-top-width: 0px; 
border-bottom-width: 0px; 
border-left-width: 1px; 
border-right-width: 1px; 
background-color: white; 
margin-left: auto; 
margin-right: auto; 
padding-top: 0em; 
padding-bottom: 1em; 
padding-left: 3em; 
padding-right: 3em; 
} 

Answer 1

我猜你的工具欄菜單絕對定位（CSS：position: absolute; right: 0;），從正常的文檔流中刪除。當窗口縮小時，你可以做的就是避免滑過其他內容，因爲它不再是文檔中的「內部」。

通常的解決方法是在父容器上放一個最小寬度，以便它不會縮小到某個限制以下（css：min-width: 100px;）。當然，IE6和更舊的版本根本不支持最小寬度，但是有1px高的不可見圖像，固定寬度的內容不能被包裹等等。...

Answer 2

試試這段代碼。我只加浮動雙方的div鏈接到左和內容向右

#links { 
position: relative; 
float:left; 
font-family: arial; 
background-color:#171817; 
width:100px; 
height:300px; 
margin-right:10px; 
} 
#content { 
position: relative; 
float:right; 
font-family: arial, helvetica; 
top: -4em; 
width: 560px; 
height:300px; 

background-color:#ffff12; 

border-style: solid; 
border-color: 36a2c1; 
border-top-width: 0px; 
border-bottom-width: 0px; 
border-left-width: 1px; 
border-right-width: 1px; 
background-color: white; 
margin-left: auto; 
margin-right: auto; 
padding-top: 0em; 
padding-bottom: 1em; 
padding-left: 3em; 
padding-right: 3em; 
}