CSSテクニックコミュのfloat

初めまして。下記のページの修正をしているのですが、floatの適用で分からないことがありますので質問させてください。

http://www.gratefulones.net/a/index.html

<div id="MENU">と<div id="KIZI">の順番を入れ替えて、floatを適用して、メニューの見た目上の出現は先（左）のままにしたいのですが、アドバイスいただけないでしょうか?

cssの一部を記載しておきます。

/* 記事部分 */
#KIZI { color:#555; margin:0 0 0 180px; padding:15px 10px 10px 15px; background:#fff url("./img/bg2.gif") repeat-y 0% 0%; }
.text{ margin:0 0.5em 1em 1em;

float:none;
}
/* メニュー部分 */
#MENU{ float:left;width:180px; }
#MENU h2{ font:122% "Century Gothic",Helvetica,Arial,sans-serif; color:#111; margin:0; padding:4px 0 2px 10px; background:#fff url("./img/bg4.gif") repeat-x 0% 0%; }
/* メニューリスト・リンク */

/* フッター */
#FOOTER{ font-size:88%; text-align:center; color:#777; margin:0; padding:0.8em 2em; border-top:1px solid #ccc; }
#FOOTER h2{ display:none; }
#FOOTER a:link,#FOOTER a:visited{ color:#777; text-decoration:none; }
#FOOTER a:hover{ color:#222; text-decoration:underline; }
#FOOTER ul{ list-style:none; }
#FOOTER li{ display:inline; margin:0 0.5em; }
#FOOTER li a{ display:inline; }
#FOOTER li address{ display:inline; }
#FOOTER { float:clear}

よろしくお願いいたします

コメント(14)

最初
全て
最新の40件

[2] mixiユーザー 06月16日 13:17

さっそくありがとうございます!
しかし、レイアウトがずれてしまいました

メニューが下に落ちてしまいました（汗）

http://www.gratefulones.net/a/index.html

今イチfloatは分かりません。。
xhtmlのソース＃KIZIを上に書いて#MENUを下にして
css内の#KIZIに　{float: left;}を加えてみたのですが間違なのでしょうか？？

画像も修正が必要ですね

[3] mixiユーザー 06月16日 13:25

すいません2：の訂正です
css内の#KIZIに　{float: left;}を加えてみたのですが間違なのでしょうか？？↓
{float:left}じゃなくて{float:right}でした。

[5] mixiユーザー 06月16日 13:39

う～ん。。画像外してもダメでした。。。
実際のソース見ていただいてよいですか？

[8] mixiユーザー 06月16日 13:54

2点目は
#KIZI { color:#555; margin:0; padding:15px 10px 10px 15px; background:#fff url("./img/bg2.gif") repeat-y 0% 0%; }
に変更ですか？

とりあえず変更後アップしてみましたが、うまくいきません～。。確認していただけますか？

[10] mixiユーザー 06月16日 14:03

変更しました。メニューカラムが左にきてくれました

しかし、今度はフッターまで左に来てしまったのですが、
これは
#FOOTER { float:clear}のソースの書き方に問題でもあるのでしょうか？

[11] mixiユーザー 06月16日 14:12

×float:clear
○clear:both

[13] mixiユーザー 06月16日 14:22

すみません

実は、xhtmlにサイトリニューアルにとりかかって３日目の素人です！３日間勉強してどうしてもfloatの適用だけうまくいかず、、、

飴さんに甘えてしまいました。反省

結果をふまえてもう一度勉強してみたいと思います

ありがとうございました

すろさん＜×float:clear ○clear:both ありがとうございます

[14] mixiユーザー 06月16日 15:13

では、ちょっと別の方法を。

1）#MENUをposition:absolute;にして、topをヘッダ分だけ指定

2）#MENUと本文部分をdivでくくり、#MENU、#KIZIともに左フロート
　　#MENUの左マージンを-100％とするか、
　　#KIZIの左マージン＋横幅分だけ、#MENUの左マージンをマイナス

＃2）はIE対策やら、幅計算やらちゃんとしないとうまくいかないけど。

ログインすると、みんなのコメントがもっと見れるよ