CSS - Float для максимальной ширины

Question

Итак, я делаю ряд предметов в полуэластичном контейнере.Слева находится изображение профиля, а затем содержимое всплывает справа от него (оба плавают влево).

Я пытаюсь сделать так, чтобы плавающее содержимое было максимально возможной ширины вместо минимально возможной ширины(как плавающие причины).

CSS:

#container {
   max-width: 800px;
   min-width: 500px;
}
.profile {
   float: left;
   width: 100px;
}
.info {
   float: left:
   min-width: 400px;
   max-width: 700px;
}

HTML:

<div id="container">
    <div class="profile">
        IMG
    </div>
    <div class="info">
        INFO
    </div>
</div>

Answer 1

Не имеет смысла плавать что-либо, когда вы хотите, чтобы это расширилось, чтобы заполнить родителя. Просто удалите float: left и свойства ширины из подразделения .info, чтобы оно расширилось, чтобы заполнить ширину родительского элемента, а затем добавьте margin-left: 100px, чтобы вытолкнуть его из-под того, который все еще находится слева. .

Answer 2

если вы перемещаете какой-либо элемент, который нужно передать его родительскому элементу, очистите: оба, переполнение: скрытое ;.

#container {
width: 800px;
clear: both;
overflow: hidden;
}

.profile {
   float: left;
   width: 100px;
}
.info {
   float: left:
   min-width: 400px;
   max-width: 700px;
}