CSSコミュの【Q】ボックスとイメージの関係

はじめまして、WEBデザイナーになって２ヶ月の新参者が途方にくれております。。。
是非ともお助けください･･･

HTMLの中に

<div id="A">
<img src="aa.jpg" width="400" height="212" align="left" />
あああああああああああああああああああああああああああああああああ
</div>

というボックスをくみます。
Aの中にはBと、イメージ画像が入っています。
そしてそのスタイルシート↓

div#A{
border: 1px solid #aaaaaa;
padding: 10px;
margin: 10px 20px 40px 0px;
text-align: left;
line-height: 1.3em;
letter-spacing: 2px;
height:auto;
}

これで構成すると、文字のボックスよりもイメージ画像が大きいので
IE以外のブラウザで見ると画像がはみ出てしまうのです。
どちらもやり方を返れば直るのはわかっているんですが、どうしてもHTMLだけを
変えずに表示したいのです。
何とかご助力願えませんでしょうか･･･

コメント(16)

最初
全て
最新の40件

[1] mixiユーザー 06月02日 16:58

えーと、いくつか分からない点を。
まず、Ｂとは文字の部分ですか？
それと、最終的にどう表示したいのがわかりません。サンプルなんかを明示してくれると答えやすいと思いますよ。

[2] mixiユーザー 06月02日 17:14

わぁ！文章なおしたと思ってたらなおってませんでした…すぃません！！

最初はボックスAにボックスBを入れて書いてたんですが、ボックスAがいらないことに気付き後から消したのですorz
このAにはイメージと文字を横ならびにして表示したいのですが、なんとＩＥでも表示不可になってしまいました＞＜
説明不足で申し訳ないです(汗
ご助力下さい～！！

[3] mixiユーザー 06月02日 17:22

画像の横に文字が並ぶようにしたいと言う事ですか？
完成予想図の画面を捏造でもいいから出してみては？

[4] mixiユーザー 06月02日 17:33

だめだ、がんばったけど質問の意味が理解できない。。orz

[5] mixiユーザー 06月02日 17:37

イメージ作成しました。
こんなかんじでいかがでしょうか？

[6] mixiユーザー 06月02日 17:56

height:auto;

↑autoじゃなくてimgより大きい値入れればいいんじゃない？
そーゆーことじゃないの？？？

[7] mixiユーザー 06月02日 17:59

違うページでこのCSSを使いまわすのでheightは固定じゃだめなのです･･･orzすいませんです＞＜

[8] mixiユーザー 06月02日 18:07

　多分、このままのHTMLでは不可です。
　前提として、imgタグのalign属性は、非推奨なのでスタイルシートのfloatを使用します。

<div id="A">
:
:
<div class="cleardummy"></div>
</div>

として、

.cleardummy {
clear : both;
overflow : hidden;
width : 1px;
height : 1px;
margin : 0 -1px -1px 0;
border : 0;
padding : 0;
font-size : 0;
line-height : 0;
}

#A img {
float : left;
}

とします。

　HTMLの改変が不可ならば、ダメですが…。

[9] mixiユーザー 06月02日 18:10

divのdisplayのタイプを変えてみては？

div#A{display:table;}

試してない上に見当はずれかもしれないですが。。。
以前似たような現象に見舞われて、原因分からず
困ったときにこれで回避できたような気がします。
（ダメだったらゴメンナサイ！）

[10] mixiユーザー 06月02日 18:37

>>にゃんこさん
試してない上に、うろ覚えなんですが、
display:tableって、対応してないブラウザが
わりとあったような…。
以前、これでならレイアウト簡単にできるんじゃね？
って思ったら、対応してるブラウザが少ない、
とかなんかの本で読んだ気がします。
なので、displayタイプの変更は、現状は
あまりやらないほうがいいかもです。

[11] mixiユーザー 06月02日 18:46

こんにちは。
以下ソースの「.clearfix」部分を、処理したい部分のクラスに変えて使ってください。CSS記述のみでいけるはずです。

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac ?*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

詳しい説明は下記をご覧くださいませ。
http://positioniseverything.net/easyclearing.html

[12] mixiユーザー 06月02日 19:40

<div id="A" style="height:300px; ">
とかダメですか？？

効きませんでしたっけ？？

[14] mixiユーザー 06月02日 21:31

#A {
border: 1px solid #aaaaaa;
padding: 10px;
margin: 10px 20px 40px 0px;
text-align: left;
line-height: 1.3em;
letter-spacing: 2px;
height: 100%;
}

* > #A {
height: auto;
}

#A::after {
content: "";
display: block;
clear: left;
}

#A img {
float: left;
}

こんなんでいけるような気がします。うろ覚え。

>木田さん
あれ、 float と clear って一緒に記述してはいけませんでしたっけ？
よく dt 要素に一緒に指定しますけど…。

dt {
float: left;
clear: left;
}

って具合に。

ログインすると、残り3件のコメントが見れるよ