CSS - плавающие и изменяющие размеры окна

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

<html>
<head>
<style type="text/css">

#one
{
    border: 1px red dotted;
    margin-right: 500px;
    min-width: 250px;
}

#two
{
   border: 1px red dotted;
   float: right;
   width: 450px;
}

</style>
</head>

<div id="container">

<div id="two">
   This is a floating div.
</div>

<div id="one">
   This div is not floating and has a whole bunch of text inside of it.
</div>

</div>
</html>
Источник

2 ответа

Ах, мне удалось понять это! Я также установил минимальную ширину для контейнера div, и плавающий div перестает двигаться, как только окно браузера достигает минимальной ширины этого контейнера div.

Источник

Сделать обертку <div>:

<div id="wrap">
   <div id="list_events"></div>
    <div id="right_content"></div>
</div>

затем сделайте это:

#wrap {
    min-width: 600px;
}

настройка min-width сделаю это.

Источник
Другие вопросы по тегам