CSS два div поруч один з одним

Ви можете використовувати flexbox, щоб викласти свої предмети:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

;

Це, по суті, просто шкрябання поверхні флексбокса. Flexbox може робити досить дивовижні речі.

Для підтримки старих браузерів, ви можете використовувати CSS float і властивості width, щоб вирішити цю проблему.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

;

На жаль, це не є тривіальною річчю, яку можна вирішити для загального випадку. Найпростіше було б додати властивість css-стилю "float: right;" до вашого 200px div, однак це також призведе до того, що ваш "main"-div буде фактично на всю ширину, і будь-який текст у ньому буде плавати по краю 200px-div, що часто виглядає дивно, залежно від вмісту (практично у всіх випадках, крім випадків, коли це плаваюче зображення).

РЕДАГУВАТИ: Як запропонував Dom, проблему з обгорткою, звичайно, можна було б вирішити з запасом. Дурний я.

Перефразовуючи один з моїх сайтів, який робить щось подібне:

  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>