Отзывчивый макет двух столбцов

Question

Первая ссылка в Google о "ответственном расположении двух столбцов" - это то, что я хотел сделать, но поменял местами (содержание в правом столбце). По-видимому, это также неправильный способ создания столбцов, поскольку обертка на самом деле не "оборачивается". Внутренний div является абсолютным, а обертка - относительным. Это создает проблемы, потому что нижний колонтитул на самом деле не идет внизу обоих столбцов, если они не полны текста. Какое лучшее исправление я могу сделать к этому? Также я надеюсь, что эта ссылка пойдет выше этой ссылки, иначе другие люди могут оказаться в такой же ситуации. Я понимаю, что связывание здесь сделает его выше, хотя:/

 .columnsContainer, footer, header { position: relative; margin: .5em; } 
.rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }   

ссылка: http://codepen.io/johnstonian/pen/guhid

Answer 1

Что вы можете сделать с абсолютной позицией - это преобразовать некоторые значения обоих столбцов следующим образом:

@media screen and (min-width: 47.5em ) {
  .leftColumn {margin-left: 19.5em;}
.rightColumn{width: 18.75em; position:absolute; left:0; top:0;}
}