Webに詳しい方に質問です。

質問

写真のように#header,#nav,#content,#contentの中に#col1,#col2,#contentの右横に#sidebar,一番下に#footerとレイアウトしたいのですが、floatを使っても#col2が#col1の下になったり#sidebarが、#contentの右下になったりして崩れてしまいます。
htmlやcssで、どのように記述すればよいでしょうか？

回答No.2

oakawaaavaea · ベストアンサー

おっと、再度です。

幅じゃなかったみたいですね。

#col1,#col2ってidでしょうか？
もしidだったらclassに変えてもでもダメでしょうか？

CSSで「#」を「.」にして、指定をid=col1→class=col1みたいにすると入れ子になると思います。

#content {
width:100%;
}

.col1 {
float:left;
width:50%;
}

.col2 {
float:right;
width:50%;
}

こんな感じで。

お礼

#を.に変えて、cssの方も変えてみましたが、contentを100%にしたことにより、#sidebarの入るスペースがなくなりました。

回答No.1

oakawaaavaea

たぶんですが、それぞれの幅が大きすぎるとfloatが効かない場合がありますよ。

ブラウザによっては、きっちり詰め込んでも崩れるものもあるので、若干余裕を持たせるといいと思います。
あとmarginやpaddingに気をつけてください。

お礼

幅を変えようとwidthで色々変えてはいるのですが、全く変わりません、何かが足りないのでしょうか？

写真の以外のでも色々と試してるのですがfloatだけが、どうしてもダメです。