左にメニューがあるページを作成したい

Question

お世話になっております。

SEO関係でHTML内では
メニュー記述を下にしてテンプレートを用いて表示しようとしております

メニューA　　　コンテンツ内容を
メニューB　　　こちらに記述
メニューC　　　します。

その際　templateの作成方法についてお伺いします。

<div id="wp-main-side">
	<!-- TemplateBeginEditable name="main" -->
<div id="main">
<h2 class="title2">○○</h2>
内容がないよう
</div><!--main end-->
<!-- TemplateEndEditable -->
<div id="side">
<ul class="accordion" id="accordion-1">
    <li class="ac_top"><a href="../a/index.html">メニューA</a></li>
    <li class="ac_top"><a href="../b/index.html">メニューB</a></li>
    <li class="ac_top"><a href="../c/index.html">メニューC</a></li>
</ul>
</div>
</div>

とのソースがあるのですが
cssでの指定が上手く行きません……

#main {
	width: 680px;
	margin-bottom: 30px;
	margin-left: 350px;/*コレを追加*/
}

#side {
	width: 220px;
	float: left;
	line-height: 30px;
	text-indent: 20px;
	font-size: 12px;

	margin-left: 10px;
	padding-top: 20px;
	margin-bottom: 30px;
	
	/*追加して色々やろうとした残骸↓/
	position:absolute;
	margin-top: 10px;*/
}

根本的に考え方が誤っているのかも知れませんが
cssで

メニューA　　　コンテンツ内容を
メニューB　　　こちらに記述
メニューC　　　します。

と指定する方法をご助力頂けないでしょうか？

年始から仕事で大変ですが
上記お問い合わせいたします。

Answer 1

一般的な方法ではfloat:leftとclearfixを使用します。
clearfixは全体wrapperのdiv(wp-main-sideのところ）に追加してください。
(border入れたら落ちるためwp-main-sideのwidthは余裕を持って９２０pxにしています。
box-sizing:border-boxの方が楽だとは思いますが……)

css

#wp-main-side{
    width:920px;
    margin:0 auto;
}

#main{
    width:680px;
    margin-bottom: 30px;
    float:right;
    border:1px solid red;
}

#side{
    width:220px;
    float:left;
    border:1px solid red;
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

ちなみにmainをfloat:rightにしていますが、htmlの記述順がside → bodyであるなら両方float:leftでいけます。
上から順に処理していくので、今のままだとmainが左にきて、sideがその隣に配置されてしまいます。
そのためmainはfloat:rightと記述しています。

Comments

[moitaro]

ありがとうございます。
#wp-main-side
でサイズ指定でガチガチに固めたらそれとなく上手く行きました。
ありがとうございます。
現在中央寄せにする方法を色々調査している最中です。

ありがとうございました。

[moitaro]

margin: 0 auto;
で中央寄せも出来ました。

ありがとうございました。

[poko_poko]

良かったです。

Answer 2

margin-left: 350px;/*コレを追加*/

の代わりに

float:right;

とすれば、期待される体裁になるかと。
ただ、CSSグリッドレイアウトで組んだ方が今風だとは思います。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

Comments

[moitaro]

ありがとうございます。
右に寄せるため
margin-left: 350px;
ではなく
float:right;
で正常に動作しました。

cssグリッドレイアウトをそのうちする予定です。
その際にお教え頂いたURLも参考にさせて頂きます。

[moitaro]

と思ったけどDreamWeaver上ではうまく行っているように見えるけど
サーバーにアップロードするとメニューが左下に行ってしまいます……