基本形（回り込み）

2つのboxを用意し、boxAのみにwidthで幅を固定、floatを指定します。

<div class="boxA">
			（内容）
</div>
<div class="boxB">
			（内容）
</div>

.boxA	{
  border: 10px solid red;
  width: 100px;
  float: left;
}

.boxB	{
  border: 10px solid blue;
}

PCでウィンドウの横幅を変化させると、boxAは幅固定のままで、boxBは幅と高さが伸縮しました。

また、boxBの内容（Bの文字）がboxAを避けるように回り込みしています。

• 各boxの中の内容は<P>タグで適当に文字を入れています。
• 見やすくするためにCSSは上記以外に多少の装飾をしています。
• HTMLとCSSで上記以外にfloat（段組み）の解除処理をしています。ここでは説明を省きますが詳しくはこちら→ floatの解除。）

overflow:hiddenで2段組

boxBにoverflow:hiddenを指定してみます。

.boxB	{
  border: 10px solid blue;
  overflow: hidden;
}

boxBの文字はboxAに下にこなくなり、左右に分割しました。

margin-leftで2段組

上記のoverflow:hiddenの替わりにmargin-leftを指定してみます。値は

• boxAの幅（width）＝100px
• 枠線border左右分＝10 x 2 = 20px

を足した120pxです。

.boxB	{
  border: 10px solid blue;
  margin-left: 120px;
}

これでも上記のoverflow:hiddenの場合と同じ結果となりました。

固定幅+可変幅のまとめ

少しややこしいので表にしてみました。

回り込み

画像の周りに説明文などにいいです。

左右に分けた以下は共に段組みとして、片側にメニュー・もう片側にコンテンツで、画面幅に合わせて折り返したい場合に使われます。

overflow:hidden

• 固定側の横幅があらかじめわからなくても可能。
• 中の要素が大きくても横スクロールバーが出なくなる。（※）

margin-left

• 固定側の横幅があらかじめわかっている場合に限られる。
• 横スクロールバーの制御は別途overflowの指定で可能。（※）

という使い方が向いているようです。

※はこの記事では触れませんが、いずれ機会があれば別の記事で書いてみたいと思います。