Адаптивное позиционирование блоков с фиксированной и 100% шириной

Question

[Igor Lanko]

Добрый день!

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

Представим, что у нас есть 2 блока. Левый блок имеет 100% ширину, так как заключает в себе текст, а значит должен быть адаптивным. Правый блок имеет фиксированную ширину, потому что в нем, например, картинка.

Моё ошибочное решение:

.left {
    width: 100%;
    float: left; /*аналогично и с inline-block*/
}

.right {
     width: 300px;
     float: left; /*аналогично и с inline-block*/
}

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

Спасибо!

Answer 1

[friogenn]

.left {
    margin-right: 310px;
}
.right {
    width: 300px;
    float: right;
}

Но придется right ставить перед left.
jsfiddle.net/5dDqr
Не уверен что это хорошее решение.

Comments

[Igor Lanko]

В моем случае подошло! Огромное спасибо!

[Igor Lanko]

Работает везде, кроме Safari. В Safari margin-right срабатывает ПЕРЕД фиксированным блоком. То есть пропускается фиксированный блок и перед ним пустое место.

Короче, margin умножается на 2.

Answer 2

[Дмитрий Христоев]

blog.html.it/layoutgala

Answer 3

[ModestesGonze]

Такое решение думаю будет лучше, чем с отступом равным ширине колонки.
jsfiddle.net/5dDqr/2