Как сверстать такую сетку?

Question

[bozilly]

Вместо тысячи слов

Comments

[sergey]

а в чем собственно сложность?

Answer 1

[Lumore]

<style>
#content {
float: right;
width: calc(100% - 200px);
}
#sidebar {
float: left;
width: 200px;
}
@media screen and (max-width: 960px) {
#content, #sidebar {
width: 100%;
float: none;
}
}
</style>
<div id="content"></div>
<div id="sidebar"></div>

Comments

[Думай Головой]

можно и без калка по старинке

[bozilly]

без calc никак?

Answer 2

[Алексей Зуев]

Старый дедовский вариант

Answer 3

[Михаил Чирский]

Посмотрел все варианты, не нашел такого, в свое время очень выручил)
jsfiddle.net/n0g10te6/1

Answer 4

[IceJOKER]

<div class='wrapper'>
  <div class='content'>
  </div>
  <div class='sidebar'>
  </div>
</div>

float + width + calc + Media Queries - все что вам нужно, 100500 примеров в интернете

Comments

[Думай Головой]

можно и без калка по старинке

[bozilly]

без calc никак?

[bozilly]

Думай Головой: как?)

[IceJOKER]

bozilly: минусовой margin

[bozilly]

IceJOKER: киньте пример. Я так пытался сделать, ничего не вышло....

Answer 5

[dk-web]

codepen.io/anon/pen/bdOWze?editors=110
мне когда-то дали такую ссылку...
использую на все 100

Comments

[bozilly]

Мне нужно, чтобы sidebar был снизу