Как правильно разместить два столбца рядом с CSS

Это одна из тех вещей, которые я выучил очень давно и никогда особо не задумывался, действительно ли я делал это right way.

Допустим, у нас есть такая структура:

<div id="wrapper">
  <div id="sideBar"></div>
  <div id="mainContent"></div>
</div>

Let ' s также говорят, что обертка имеет ширину 600 пикселей .

Должен ли я перемещать sideBar влево и mainContent вправо , или я должен перемещать их оба влево ?

Кроме того, если я установил фиксированную ширину для sideBar , как я могу заставить mainContent заполнить остальную часть пространства аналогично тому, как работает таблица? Если я установил mainContent на display: inline-block и width: 100% , он переместится на следующую строку: /

Примечание: в моем конкретном сценарий Я не хочу использовать таблицу.