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

質問

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

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

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

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

回答No.1

dezimac · ベストアンサー

<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/CU20050401A/

お礼

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

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

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

回答No.4

prussianblue

>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除外ここまで*/

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

お礼

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

回答No.3

key-child

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

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

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

回答No.2

kikanbo

floatを使うときはWidthとclearはありますか？

clearするとき空divはよくないです。

参考URL：

http://kikky.net/pc/css_float.html

お礼

ありがとうございました。
widthはありましたが、clearは入れていませんでした。

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