CSSでボーダーがとぎれてしまう・・

質問

すみません・・普段は自分で調べても分からないときだけこちらで質問するのですが、今回は作業に追われておりまして・・申し訳ない気持ちですが、質問させていただきます。

CSSで・・・
header、main、menu、footer の順番でdivで囲まれたコンテンツ？があります。
headerが上でその下の左にmenu、右にmainと並べて、その境目にボーダー線を指定したいのですが、どちらに指定しても逆側が長くなってしまうとボーダーが途中で途切れてしまいます。
これをこれを常にfooterの位置まで表示する方法はありませんでしょうか？
よろしくお願いします。

回答No.1

shizuku · ベストアンサー

私のやり方は
全体、またはmainとmenuを新しいdivで囲って、その囲ったdivにボーダーの背景画像を縦に繰り返して対応しています。
デザインがわからないので、あくまでも参考です。すみません。
（また背景が画像になるのでmenuの幅サイズが可変でなく、固定されていることが絶対です・・・）

お礼

お～shizukuさん・・ありがとうございます。

ばっちり対応できました。
ほんとうは感謝の気持ちをもっと述べたいのですが・・・

明日が締め切りなもので・・すみません・・。
身内の仕事なんですけどね。

回答No.2

kuro_buchi

mainとmenuを包むcontentsというような枠を作ってやり，
そのcontentsの背景にmainとmenuの間にラインが引かれたような背景画像を
作り，縦に繰り返してあげれば実現できます．
そこでぶち当たる壁として，floatを使ってmenuとmainを振り分けた際，contentsの高さが無くなって背景がでなくなります．これはcssの仕様なので仕方が無いのです．
それを解決するために“clearfix”と呼ばれるテクニックを用います．
詳細は参考URLを見ていただければ簡単に出来るはずです．

もし解らなければまた返答致します．

参考URL：

http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html

お礼

ありがとうございました。
参考URLはまだちゃんと読んでませんが、おもなブラウザで確認したところ上手く表示されていましたので、とりあえずこのまま進めてみます。

本当に助かりました・・。