CSS 2 столбца. Один динамический, второй статический?

Question

[des1roer]

В СSS ни в зуб ногой. имею страницу с 2мя столбцами
1 ый
.span-24 {
margin-right: 0;
width: 90%;
}
2 ой
.span-5 {
width: 150px;
}
но чет думаю что это не правильно.
при небольшом сдвигании окна 2столбик улетает в подвал, а место под него вроде как остается.
как гарантированно отображать 2 статический столбик а все остальное отдать под первый динамический столбик7
----
очень большой UPD
---
может имеет смысл сделать статичным правый столбец. тогда вопрос следующий - как это реализовано у контакта и гмэйла?

Answer 1

[des1roer]

вроде так заработало

.lastleft {right: 15px;position: absolute;}
<div class="span-5 lastleft">

Answer 2

[Виталий Озерский]

<div class="span-5">...</div>
<div class="span-24">...</div>

.span-5{
width: 150px;
float: right;
}

.span-24{
 margin-right: 150px;
}

Answer 3

[Тимофей]

Можно через flex сделать, но с этим старина IE работать откажется.
Можно сделать как-то так

.cols {
 display: table;
 width: 100%;
}
.span5, .span-24 {
 display: table-cell;
}
.span5 {
 width: 150px;
}

Comments

[des1roer]

старина ie глав гавнюк в корпо (копро) сайтах. и без него никуда(((

[Тимофей]

des1roer: Ну тогда второй вариант через эмуляцию таблицы. Это вроде 8 ие должен поддерживать. Ну или предложенные варианты с флоатми и абсолютным позиционированием, но мне лично они меньше нравится

[des1roer]

а чем плох подход с абсолютным позиционированием?

[Тимофей]

des1roer: Тем, что если абсолютно позиционированный элемент будет иметь высоту большую, чем соседний, то он будет наезжать на контент ниже. Ну или обрезаться, если сделать overflow: hidden у родителя. Float же плох тем, что тебе нужно выставлять margin, который зависит от размера элемента. Подход же с таблицами обе проблемы решает и, если я ничего не упускаю, не добавляет новых. Плюс можно даже вертикальное выравнивание делать.
А flex - так вообще православный вариант, добавляющий гибкости для адаптивной верстки. Но пока не вымрет IE9 - лучше его не использовать.

Answer 4

[Anton Kolesnikov]

Такое проще сделать таблицей:

<table width="100%">
    <tr>
        <td width="150">
        </td>

        <td>
        </td>
    </tr>
</table>

Comments

[des1roer]

может и так. но куда девать готовый css (а он не для одной странички а для всего сайта).

Answer 5

[Иван Ильясов]

Внятного ответа нет.
Поискал в буржунете, нашел, то что нужно и прямо по теме:

"Блок фиксированной ширины вместе с адаптивным блоком"

Один блок стоит на месте, второй меняет ширину.

Фиксированный блок с правой стороны: https://codepen.io/kanishkkunal/pen/MYKmbe
Фиксированный блок с левой стороны: https://codepen.io/kanishkkunal/pen/ZBmrGx

Взято отсюда: https://superdevresources.com/fixed-width-sidebar/