CSSテクニックコミュのsubとmainのフッダー部分を合わせたい

またしても初歩的な事で、何度も質問して恐縮です。何卒御指摘を宜しくお願い致します。

左（sub）がサブナビゲーションを配置していて、右(main）にfloatで回り込んでます。
両方には、height:auto;配置して、テキスト量を増やしてます。
うまく説明できないんですが、左(sub）の背景部分#subのbackground-image:url(images/sub.gif);をmain（テキスト量が多いので）に合わせて下に伸ばしたいということです。
bodyのfooterにsubとmainのfooterを揃えるにはどの様にしたら宜しいでしょうか

XHTML1.0

<div id="sub">
<div id="sub-header"> </div>
・
・
・
<div id="sub-footer"> </div>
</div>

<div id="main">
<div id="main-header"> </div>
・
・
・
<div id="main-footer"> </div>
</div>

------ css ----------
#sub{
float:left;
width:225px;
height:auto;
padding:0 0 0 26px;
background-image:url(images/sub.gif);
background-repeat: repeat-y;
background-position: right;
}
#sub-header{
background-image:url(images/sub-header.gif);
height:25px;
}
#sub-footer{
background-image:url(images/sub-footer.gif);
height:25px;
}

#main{
float:right;
width:515px;
height:auto;
padding:0;
background-image:url(images/01main.gif);
background-repeat: repeat-y;
background-position: left;
margin-right: 26px;
}
#main-header{
background-image:url(images/01main_header.gif);
height:25px;
}
#main-footer{
background-image:url(images/01main_footer.gif);
height:25px;
}

コメント(14)

最初
全て
最新の40件

[1] mixiユーザー 08月10日 22:39

Faux columns
http://www.techdego.com/2007/05/liquid_image_faux_columns_css.php
このやり方を使えば対処できるかと。

[3] mixiユーザー 08月11日 17:58

> KABA さん　ﾏｺｯﾁさん

こんにちはデス

＞ツキさん最近連投ですな。勉強熱心な事で感心します。
・・・そんなことなぃですょ

ぁたし、ずっとWEBデザイナーなんて語ってぉきながら
依頼されたHPは全部昔ながらのデーブルレイアウトだったので。しかもDreamweaverまかせ・・・

こんなんでクライアント様から制作費頂くのも心苦しくて、なんとかCSSをマスターしなくては！と思ってぃたんですが、質問する相手も居なぃし学校や講習会も行く時間もなく（ぅちの会社ぁたし?人しかデザイナーが居なぃので

）
時間を掛けて・・・がなかなか難しかったんです。
でも、今度自分の会社のHPのリニューアルを任せてもらぇることになり、これに関しては特に納期もなぃのでチャンスゃ

とぃぅことでココ?ヶ月ほぼ立て篭もり状態で何冊もの参考書相手に格闘してぉります

でも

さすがに解らなぃことばかりなので、ココはmixiに頼らせて頂こぅと神頼みさせて頂ぃた次第です

（しかも皆さん凄く親切丁寧でめっちゃ感激デス

）
これからも初歩的な質問をさせて頂くかもしれませんが、何卒ぉ力添ぇを宜しくぉ願ぃ致します

して本題のFaux columns
試しましたがエラー表示が出てしまぃました。
多分、また余計なものを入れてしまってぃる可能性がぁるので
見直して再度チャレンジしてみます！

すみません、長々なりましたが本当にぁりがとぅござぃました

[5] mixiユーザー 08月18日 00:06

こんにちは。
前回は素晴らしい助言を有難うございました。
ただ、挑戦してみたものの上手く出来なかったので
別のやり方を試してみましたが、表示が何かオカシイんです

何度も申し訳ありませんが、すみません

また助言をお願いできますでしょうか。。。

左画像な感じで#fauxに背景を入れ、#sub、#mainでテキストの配置を入れようと思ったんですが、右画像のように背景が出てきません。
高さ設定はしてませんが、リピートもかけてますし<div></div>で一つのグループにしているのに個別に判別している様に思うんですが、どなたか原因が分かる方いらっしゃいますでしょうか

<div id="wrapper">
<div id="faux">

<div id="sub">
・
・
・
</div>

<div id="main">
・
・
・
</div>

</div>
</div>

#wrapper{
width:800px;
margin:0 auto;
padding:0;
background-image:url(images/bese-wrapper.gif) repeat-y #3A506E;
}

#faux{
display:block;
width:780px;
background-image:url(images/背景.gif)　repeat-y;
margin:0 10px;
}

#sub{
float:left;
width:225px;
padding:0 0 0 16px;
}

#main{
float:right;
width:515px;
padding:0;
margin-right: 16px;
}

[7] mixiユーザー 08月18日 00:30

subとmainを囲っているfauxに、clearfixの指定でOKのような。

http://kat.cc/1844c8

[8] mixiユーザー 08月18日 00:35

こんばんわ。
ＣＳＳに以下を追加
/*-----CSS-----------*/
#faux:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
/*-----CSS-----------*/

で解決しないでしょうか？

ちょっと最近、CSSレイアウトから遠ざかっているんで
自信ないんですがfloatを何処でも解除していないが
原因かもしれません。

もしくは以下を追加したら解決しないでしょうか？

/*--------CSS----------*/
.clear {
clear:both;
visibility:hidden;
height:0px;
font-size:0;
margin:0;
padding:0;
}

/*--------CSS----------*/

/*--------HTML----------*/
<div id="faux">
<div id="main">
< /div>
<div id="sub">
< /div>
< /hr class="clear">　→これを追加
</div>

/*--------HTML----------*/

間違っていたらすいません。m(_ _)m

[11] mixiユーザー 08月18日 04:06

あえての策として </div> の前に <br clear="all" /> を入れるのも１つの手でしょうか。

</div>
<br clear="all" />
</div>
</div>

ただバリデーターに引っかかっちゃったりするので推奨はされません。strict宣言してる場合はもっての他です。。
ドリームウィーバーの表示をきれいにする以外つかいみちなさそうです。。（笑）

[12] mixiユーザー 08月19日 00:26

はじめまして。
私も同じ事で悩んでおりましたので、とても参考になりました！
8:3panda(R)さんの例で解決いたしました。
ありがとうございました！！

[13] mixiユーザー 08月21日 13:06

皆さんコンニチハ

モモンガ@365さんもコチラのコミュに参加されてたんですね

心強いです

実は本題を質問した帰りバイクでコケまして

本日復帰したんですが、皆さん沢山コメント頂きまして遅ばせながら有難うございました

先程色々試してみました！

8:3panda(R)さんの例だと下辺まで伸びてくれたんですが、
< /hr class="clear">
の表示も出てきました。なんででしょう・・・？？？

モモンガ@365 さんの
<div style="clear: both;"></div>
で上手く出来ました

・・・でも、たしかにまたタグが増えました

私のソースやたらとdivやら余計なタグが多いです

最初はこんなものかと思ってたんですけど
他HPを覗いても明らかに<div>の使いすぎ？
たとえば、faux背景に上下のheader、footerを入れるにしても
とくにリンクやテキストではなく装飾用なので
<div id="faux">
<div class="faux-header"></div>
<div class="faux-footer"></div>
</div>
としてるんですが、これが正しいのかも解ってない有様です。

[14] mixiユーザー 08月21日 16:43

すみません

<div style="clear: both;"></div>も良かったんですが、
他にも方法がないかと、もう一度一から模索した結果、

コバさんのclearfixを試したらバッチリでした。

<div id="faux" class="clearfix">
</div>

最初clearfixの入れ方が解ってなかったんですが、
多分コレでいいのかと