DIV бок о бок внутри контейнера

Question

Я работаю над внутренней программой для работы, которая по существу основана на PHP. Моя проблема в том, что у меня есть заголовок, боковая навигация, основной контент (справа от навигации) и нижний колонтитул. Rough Layout Picture

Моя проблема в том, что у меня есть два DIV в контейнере, навигация настроена на процент с минимальной шириной, а раздел контента установлен, чтобы занять оставшееся пространство , В общей сложности навигация и контент должны занимать около 91% площади экрана. Что происходит после небольшого сжатия браузера

Мой CSS выглядит так для полей, которые я считаю актуальными:

    .container{
        width: 100%;
        float: inline-block;
    }
    .header{
        float: left;
        text-align: left;
        background-color: lightblue;
        width: 100%;
        vertical-align: middle;
        display: block;
        border-radius: 15px;
    }
    .header h1{
        font-weight: bold;
        font-size: 40px;
        text-indent: 50px;
    }
    .msg_alert{
        background-color: green;
        color: white;
        width: 95%;
        padding: 5px;
        border-radius: 10px;
    }
    .err_msg_alert{
        background-color: red;
        color: white;
        width: 95%;
        padding: 5px;
        border-radius: 10px;
    }
    .menu{
        float: left;
        width: 13%;
        border: 3px solid grey;
        padding: 5px;
        background-color: lightgrey;
        border-radius: 15px;
        margin-top: 20px;
        margin-right: 20px;
        min-width: 200px;
    }
    .menu a{
        float: left;
        color: black;
        text-align: left;
        padding: 14px;
        text-decoration: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        margin: 3px;
        background-color: lightblue;
        width: 40%;
        min-width: 150px;
        border-radius: 15px;
    }
    .menu a:hover{
        background-color: grey;
        color: black;
    }
    .menu ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu li{
        padding: 8px;
        margin-bottom: 7px;
    }
    .content{
        float: left;
        width: 78%;
        padding: 20px;
        margin-top: 20px;
        margin-left: 20px;
        /*border: 3px solid red;*/
    }
    .footer{
        display: inline-block;
        width: 100%;
        background-color: lightgrey;
        border-radius: 15px;
        font-size: 12px;
        text-align: center;
        margin-top: 5px;
        padding-bottom: 10px;
    }

Я не уверен, что Я сделал неправильно Все отображается правильно, если браузер работает в полноэкранном режиме, но когда я уменьшаю его примерно до 3/4 размера браузера, навигационная система остается на своем месте, но содержимое перемещается ниже.

Я настроил мобильную версию, которая отлично работает, но у меня проблемы с рабочим столом.

Заранее благодарю за помощь.

Answer 1

вот решение -

<div class="header"></div>
  <div class="menu_content">
    <div class="menu"></div>
    <div class="content"></div>
  </div>
  <div class="footer"></div>

    .menu{
    width: 13%;
    border: 3px solid grey;
    padding: 5px;
    background-color: lightgrey;
    border-radius: 15px;
    margin-top: 20px;
    margin-right: 20px;
    min-width: 200px;
}
.content{
    width: calc(100% - 21.7%);
    padding: 20px;
    margin-top: 20px;
    margin-left: 20px;
    border: 3px solid red;
}
.menu_content {
  display: flex;
  align-items: flex-start;
}
.menu_content::after {
  content: '';
  clear: both;
  display: block;
}

Answer 2

Что ж, хотя ширина .menu и .content может увеличиться до 100% или менее в более широком формате, из-за настройки min-width пикселей .menu они станут шире чем 100% при уменьшении ширины окна, так как 200px min-width: 200px; станет намного больше, чем 13% ширины, которую вы для него определили. Так (поскольку оба являются числами с плавающей точкой), .content будет go ниже .menu, потому что больше нет места для него рядом с .content.

Чтобы избежать что вы можете обернуть оба этих элемента в контейнер div и присвоить ему display: flex. Кроме того, добавьте flex-shrink: 0; (= можно уменьшить) к .content. Это должно в основном делать свое дело. (Есть и другие подробности, но просто ознакомьтесь с руководством по гибкости - это действительно совсем не сложно.)

Другой подход - определить ширину меню как 200px (фиксированная) и ширину для .content as width: calc(100% -200px) - полная ширина родительского элемента минус 200 пикселей, независимо от ширины родительского элемента.

(Это не вычисляет отступы, поля и т. д. c. - вам следует учитывать это в «реальные» значения, которые вы используете)