调整窗口大小隐藏了我的导航边栏

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; 
}