Окно изменения размера скрывает мою боковую панель навигации

Question

У меня есть сайт.Это довольно просто, просто столбец текста в середине и слева от него столбец навигации со ссылками на мои страницы.Когда я изменяю размер окна своего браузера на своем веб-сайте, его уменьшение приводит к тому, что столбец текста закрывает столбец навигации.Хотя это не проблема для компьютеров с широкоэкранными мониторами и высоким разрешением, это проблема для некоторых людей, которые загружают страницу и находят текстовый столбец, уже закрывающий столбец навигации из-за размера окна.Как я могу сделать так, чтобы мой столбец навигации перемещался вместе с моим текстовым столбцом при изменении размера окна, а не перемещался вообще и становился скрытым при изменении размера окна?другой див.Вот ксс:

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