CSSのfloatとdivについて質問です。

Question

下記のようにmainの中にlocal-navigationを配置したいのですがやり方が分からないのでご教授お願いします。

現在はlocal-navigationがfooterの上に表示されて自分の意図することが出来ていません。

sidebar-leftとsideba-rightはfooter部分まで伸びていて欲しいのです。

やりたいこと：
 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
｜header-menu 　　　　　　　　　　　　　　　　　　　　　｜
｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜
｜sidebar-left｜　　　　　main　　　　　｜sidebar-right ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜＿＿＿＿＿＿＿＿＿＿＿＿｜　　　　　　  ｜
｜　　　 　　 ｜local-navigation　　　　｜　　　　　　　｜
｜＿＿＿＿＿＿｜＿＿＿＿＿＿＿＿＿＿＿＿｜＿＿＿＿＿＿＿｜
｜footer　　　　　 　　　　　　　　 　　　　　　　　　　｜
｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜

現在の状況：

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
｜header-menu 　　　　　　　　　　　　　　　　　　　　　｜
｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜
｜sidebar-left｜　　　　　main　　　　　｜sidebar-right ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　　　　｜　　　　　　　　　　　　｜　　　　　　  ｜
｜　　　 　　 ｜　　　　　　　　　　　　｜　　　　　　　｜
｜＿＿＿＿＿＿｜＿＿＿＿＿＿＿＿＿＿＿＿｜＿＿＿＿＿＿＿｜
｜local-navigation 　　　　　　　　 　　　　　　　　　　｜
｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜
｜footer　　　　　 　　　　　　　　 　　　　　　　　　　｜
｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜

過去の質問：

「CSSでメイン部分が80%ぐらいに表示するには？　http://oshiete.goo.ne.jp/qa/7728293.html　」

「CSSのbackground-imageについて　http://oshiete.goo.ne.jp/qa/7728304.html　」

ORUKA1951 · Accepted Answer

他の質問と合わせて、ごく簡単な例を挙げておきます。HTML5でもっとも大事なことは、文書の構造化です。デザインのためのHTMLは記述しない・・これがHTMLを学ぶ上でもっとも大事なことです。　下記に極めて標準的なHTMの雛形を作成します。HTML5で作成しておきます。実際は実用的なHTML4.01strictで作成してください。他のDTDは使わない!! 　このHTMLに対して、次の４つのデザインをスタイルシート【CSS2.1の範囲内】で設定してください。 (注意)HTMLには一切手を加えないこと。 [CSS1]永続的スタイルシート　使用するフォント、日本語向けにpやhについては縦方向マージン0、line-height:1.6emを指定　わかりやすいように、それぞれに背景色を指定しておく　　body:gray,header:yellow,section,white,section>section:silver, 　　aside:aqua,aside:first-child:lime,footer:fuchsia,nav:teal とする。 [CSS2]スクリーン用標準スタイルシート・ウィンドウ幅の90%でかつ、最小640px～最大900pxでウィンドウ中央に表示、ウィンドウが900pxを超える場合は900px ・header幅いっぱい・section内の最初のaside(本文と直接関係ない記事)はsection内の右側・section内の二つ目のasideはsection内の左側・section内のnavはsection最下段・footerは全幅 [CSS3]スクリーン用代替スタイルシート/視覚弱者向け・ウィンドウ幅の100%でかつ、最小640px～最大1000pxでウィンドウ中央に表示、ウィンドウが1000pxを超える場合は1000px ・header幅いっぱい・section内の最初のaside(本文と直接関係ない記事)は表示しない・section内の二つ目のasideはsection内の下側に枠つきで表示・section内のnavはsection最下段・footerは全幅 [CSS4]印刷用スタイルシート・navは印刷しない・section内の最初のaside(本文と直接関係ない記事)は印刷しない・section内の二つ目のasideはsection内の下側に枠つきで印刷＿＿サンプル＿＿＿

＿＿

Your title

＿＿＿

＿

＿＿

A smaller heading

＿＿

＿＿＿CSSのfloatとdivについて質問です。＿＿

＿＿

＿＿＿下記のようにmainの中にlocal-navigationを配置したいのですがやり方が分からないのでご教授お願いします。＿＿

＿＿

＿＿＿現在はlocal-navigationがfooterの上に表示されて自分の意図することが出来ていません。＿＿

＿＿

＿＿＿

┌──────────────┐
│header　　　　　　　　　　　│
│　　←------ nav -----→　　｜
├───┬──────┬───┤
｜aside │main　　　　│aside │
│　　　│　　　　　　│　　　│
│　　　│　　　　　　│　　　│
│　　　│　　　　　　│　　　│
│　　　│　　　　　　│　　　│
│　　　│　　　　　　│　　　│
│　　　├──────│　　　│
│　　　│←- nav --→│　　　│
├───┴──────┴───┤
│footer　　　　　　　　　　　│
└──────────────┘

＿＿＿＿

＿＿＿sidebar-leftとsideba-rightはfooter部分まで伸びていて欲しいのです。＿＿

＿＿

＿＿＿

A smaller heading

＿＿＿

＿＿

＿＿＿＿＿＿＿

＿

ORUKA1951 · Answer

clearfixの記述の仕方 - ホームページ作成ソフト - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7726726.html )
　をご覧ください。

ブロックを配置するためにfloatを使わなければ良いです。それが一番楽です。ナビゲーションをstatic以外の直近の親コンテナブロックの対して絶対配置し、他の兄弟だけはその分マージンをとっておけば良いです。右にしようが、左にしようが自由に出来ます。

floatは記事中の挿絵の周りに本文を回り込ませるために、取っておきましょう。

CSSのfloatとdivについて質問です。

他の質問と合わせて、ごく簡単な例を挙げておきます。

clearfixの記述の仕方 - ホームページ作成ソフト - 教えて！goo (

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング