基本形

2つのBox共にfloatをし、それぞれwidth:○%で幅指定します。ここではboxA:30%、boxB:70%とします。

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

.boxA	{
  border:10px solid red;
  width:30%;
  box-sizing:border-box;
  float:left;
}

.boxB	{
  border:10px solid blue;
  width:70%;
  box-sizing:border-box;
  float:left;
}

width指定だけではborderの幅を含まず、全体の幅は30%+70%+border分（10px x 4本分）で100%を超えてしまいます。そこでbox-sizing:border-boxでborderを含めた割合にしてあります。borderやpaddingがない場合はbox-sizing:border-boxの行はいりません。

PCでウィンドウの横幅を変化させると、それに応じてそれぞれのboxの幅の率に応じて伸縮しました。

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

最大幅と最小幅を指定

HTMLはそのままで、CSSのみboxAにmax-widthとmin-widthを追加します。

.boxA	{
  border:10px solid red;
  width:30%;
  box-sizing:border-box;
  max-width:200px;
  min-width:150px;
  float:left;
}

%指定＋%指定のまとめ

サイトの構成によってはシンプルでいいでしょう。

片側をメニューにする場合

• 幅が狭い際にメニュー項目が折り返し（2行）になりかねなく、幅と見た目を考慮する必要があります。
• メニューは一般的に固定幅の方が見やすいと思われます。
• 広告にする場合多くは幅固定のため、広げた際に余白ができたり、狭めた場合にスクロールバーが出たりします。

min-widthを広告幅以上にするか、下記記事の「固定幅＋可変幅」にするといいです。