divの入れ子枠の中に収めたい

解決済

質問者：mutu560
質問日時：2007/02/16 10:36
回答数：4件

左側に記事　右側に写真　それらを大枠で囲った日記風のものをdivの入れ子構造で作成しています。
<div 大枠>
　<div 記事（float: leftにしている）></div>
　<div 写真></div>
</div>　　　　　　　のような感じです。

概ねそれらしく出来たのですが、記事を長く書き込んでいくと文章下部が大枠からはみ出してしまいます。
大枠の高さは写真高さに従っているようです。
記事のほうの高さに従わせるにはどうしたらよいでしょうか。

それと、左に記事　右に写真を並べて表示が、IEのみうまく表示されません。
記事の文末の高さに写真の上端がそろうような感じです。
IEでうまく表示できないのは、何が問題なのでしょうか。

どうしても分りません。教えてください。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： dezimac
回答日時：2007/02/16 11:04

<div class="sotowaku">

<div class="kiji">記事</div>
<div class="pic">写真</div>
<div class="clear"></div>
</div>

.kiji {
float: left;
width: ○px;
}
.pic {
margin-left: ○px;
}
.clear {clear: left;}

というようにすれば解決すると思います。

Windows版IEはCSSの解釈に問題が多い上に、シェアが一番大きいので何かと厄介な存在です。

http://allabout.co.jp/internet/hpcreate/closeup/ …

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
枠のほうは、文章に沿って伸びるように直りました。

ですが、文章が入ると写真が下がってしまうというのが治りません。
float:leftにしているのですが、IEで見たときだけ下がります。

解決方法はありますでしょうか。

通報する

お礼日時：2007/02/16 14:10

No.4

回答者： prussianblue
回答日時：2007/02/27 00:24

>IEで、文章が写真を下げてしまう件について、解決法をご存知でしたら教えてください。

ということについては、文章が写真を下げるという表現の受け取り方があっているか分からないので、参考程度にですが・・・<div 写真></div>にもfloatすれば、上辺の位置は揃うのではないかと思います。

それによって、記事・写真双方の高さが認識されなくなるので、「floatしたboxを親boxからはみ出させないテクニック」が必要になります。下のcssソースを試してみて下さい。

div大枠:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;}

div大枠 {
display: inline-table;
min-height: 1%/*IE7用*/;}

/*IE-mac除外\*/
* html div大枠 {
height: 1%;}
div大枠 {
display: block;}
/*IE-mac除外ここまで*/

私自身、以前悩んで調べた件なのですが、多分これで良いのではないかと思います・・・。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
どうにか形にすることが出来ました。

通報する

お礼日時：2007/03/01 08:14

No.3

回答者： key-child
回答日時：2007/02/16 20:46

floatする（浮かせる）のは写真の方がいいんじゃないの？

.diary {
width: 100%; /* 領域確保 */
overflow: auto; /* 領域確保 */
}
.photo {
float: right; /* 画像右 */
}

<div class="diary">
<div class="photo">写真</div>
<div class="comment">記事</div>
</div>