Как избежать переноса в CSS float

Question

У меня есть страница с двумя столбцами рядом (определяется как с плавающей точкой: слева).

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

как мне этого избежать?и все же, чтобы они были рядом, независимо от размера экрана.

Спасибо

Answer 1

В качестве альтернативы, если вы хотите, чтобы их размер изменялся с помощью браузера, нужно будет указать ширину в процентах. Итак:

.div1 {
float:left;
width:49%;
background:red;
}

.div2 {
float:left;
width:49%;
background:orange;
}

Некоторые люди используют здесь 50%, а я не склонен

Answer 2

Сделайте родительский контейнер фиксированной ширины или установите переполнение на auto. Например, если ваши два столбца имеют ширину 200 пикселей

<div style="width: 400px; overflow: auto;">
  <div style="float: left; width: 200px;"></div>
  <div style="float: left; width: 200px;"></div>
</div>