http://maf.jp/blog/

を見ていただけますでしょうか。
ブログなのですが、エントリーが途中で消えてしまい、その上にページ全体のフッタが表示されてしまっています。
状況としては、クラスmtDiv3のdivタグの中で、記事の入っているmtEntryBodyとComments...とかが入っているmtEntryFooterの2つのdivがあって、
mtEntryFooterをmtEntryBodyの右に表示するためにmtEntryBodyにfloat:left;をかましているのですが、
そうするとmtDiv3の高さが、mtEntryBodyの高さに関わらずmtEntryFooterによって基底されてしまうようなのです。

このような現象を抑えて、mtDiv3がちゃんとmtEntryBodyの高さになるようにするには、どのようにCSSを指定すればよいでしょうか。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/07/12 17:56:10
  • 終了:--

回答(7件)

id:ke-zi No.1

ke-zi回答回数95ベストアンサー獲得回数02004/07/12 18:08:12

ポイント14pt

http://tohoho.wakusei.ne.jp/css/basic.htm

そのファイルは現在ありません

mtEntryBodyに対してheight(高さ)を指定してあげるのが手っ取り早いです。height:500px; とかで試してみては。

詳しいパラメータはとほほさん等を参照してみて下さい。

css自体を覗いてみましたが、結構設定がバラバラな印象を感じましたので、heightに限らず他のパラメータについても調べてみるともっと好みのレイアウトを作れると思いますよ。

id:kokogiko

ありがとうございます。

やっぱりheightしかないですかね…。

できれば記事の長さにフレキシブルに対応したいのですが…。

2004/07/12 18:12:45
id:kacchan6 No.2

kacchan6回答回数106ベストアンサー獲得回数02004/07/12 18:26:55

ポイント14pt

float:leftをやめて、

height:100%でいかがでしょうか?

外してたらポイントは要らないです。

id:kokogiko

試してみましたが駄目でした…。

2004/07/12 18:37:48
id:kacchan6 No.3

kacchan6回答回数106ベストアンサー獲得回数02004/07/12 18:54:16

ポイント14pt

div.mtDiv3 div.mtEntryBody {

height:100%;

padding-right:5px;

margin-left:3px;

padding-bottom:20px;

width:330px;

}

div.mtEntryFooter {

position:absolute;

top:0;

right:30px;

padding-top:20px;

padding-bottom:20px;

}

これでも外してたらあきらめます。。。

id:countdown No.4

countdown回答回数19ベストアンサー獲得回数12004/07/12 19:19:44

ポイント14pt

URLはダミーです。

div.mtDiv3に

position:absolute;と

width:500px;(←例えば)

を入れれば、とりあえずの見栄えは良くなるようです。

div.mtDiv3 {

color:#A3A3A3;

background-color:#F0F0F0;

/* for MacIE5’s Bug */

position:relative;

/*¥*/

position:absolute;

/**/

width: 500px;

}

と言う感じです。

id:ke-zi No.5

ke-zi回答回数95ベストアンサー獲得回数02004/07/12 19:31:20

ポイント14pt

http://tohoho.wakusei.ne.jp/css/

そのファイルは現在ありません

heightに対してはパーセンテージでの指定は出来なかった気がします。

最終的にどういう形にしたいのかがいまいち分からないのでなんとも言えないですが、topパラメータとmargin-topパラメータを使い分けてみてはどうでしょうか。

一度floatを使うのをやめて、marginやpadding、topやleftだけでレイアウトを制御してみると、floatを使った時にどうなるのかが理解しやすいと思いますよ。

id:moririn1959 No.6

moririn1959回答回数13ベストアンサー獲得回数02004/07/12 23:43:29

ポイント14pt

ちらりとCSSファイルを拝見しました、class指定は、というより、オブジェクトに対するボックスの概念を把握できていれば制御できます。そして、どう入れ子の構造になる吐き出しタグを吐かせているのか、そのプログラムにもよりますが。そのあたりをネットで一度調べられることをお勧めします。基本的にテーブルは、高さ指定が入れ子になればなるほど利きにくいものになります。またdivとspanの使い分けをきっちり抑えておくべきでしょうか。

id:kamioka No.7

kamioka回答回数3ベストアンサー獲得回数02004/07/13 18:54:06

ポイント40pt

URLはダミーです。

div#mtUtilitiesに

clear: left;

追記でどうでしょうか。

id:kokogiko

ずばり!ではありませんが、ヒントになりました!

ダミーのdiv要素を入れて、そいつにclear:leftしました。

自分のサイトじゃなく、また技術系に詳しくない方のサイトをいじっていたので、あまりCSSの本質を調べたりとかそっちの方にいくわけにもいかず、小手先でいいので手っ取り早い方法を探しておりました。

ありがとうございました。

2004/07/13 20:15:00

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません