Нужно два div, чтобы правильно выстроиться

Question

Вот скриншот того, как состав обоих дивов .

Левый столбец, div, который я хочу выстроить справа от него, -

И оба этих дива в пределах

.content-body {
    padding:10px 15px;
    font-size:.8em;
    font-family:arial;
    overflow:auto;
}

.col-left {
    float:left;
    position:relative;
    overflow:auto;
    height:100%;
    width:20%;
    padding:0 5px 0 0;
}

.col-middle {
    width:auto;
    height:auto;
    float:left;
    xmargin-top:5px;
    xfont-size:.8em;
    border:1px solid red;
    font-family:arial;
}

Как бы получить .col-middle div для правильного выравнивания?

Любая помощь приветствуется.

Answer 1

Измените ширину .col-middle на 80% или меньше , чтобы оба элемента могли поместиться в свой контейнер.

Вы также можете сделать .col-middle float right .

Answer 2

Еще один вариант (хотя вы также должны дать ширину правому столбцу):

    .col-middle {
        ...
        margin-left: 20%;
    }

Редактировать: Если вы оставите .col-middle левое поле, вам не нужно его плавать или придавать ширину

Answer 3

добавление

clear:none;

для обоих столбцов div

и

width:80%;

к вашей средней колонке должно позволить им идти рядом:)

Answer 4

col-middle принимает ширину: 100%, поэтому вы должны указать ширину: менее 80%.

еще одно решение, которое вы можете сделать, это сделать ширину: 79% и убрать float: left и заставить его отображать: table-cell;

.col-middle {
  width: 79%
  height:auto;
  display: table-cell;
  xmargin-top:5px;
  xfont-size:.8em;
  border:1px solid red;
  font-family:arial;
}