HTML 画像の表示

質問

左にサイドバー、右にコンテンツ画面があるレイアウトです。

全体の大きさは「witdth="100%"」でウィンドウの大きさと等しくなるようにしています。
ネガティブマージンを使用し、右にあるコンテンツのソースを最初に書き、左にあるサイドバーのソースを後から書いています。

サイドバーの大きさは固定で、コンテンツの大きさは可変です。
コンテンツ内の<pre>および<img>が横に長すぎる場合、
Firefox2：コンテンツ画面からはみ出す。
IE6：コンテンツ画面の横幅が大きくなる。
という現象を防ぎたいです。

要するに、全体の画面はウィンドウサイズの抑え、そこからはみ出てしまう文字や画像のみを、スクロール等で画面内に抑えたいということです。
画像の大きさは変更しないものとします。

CSSを以下のように設定したところ、<pre>はスクロールバーが表示され、うまくいきました。
しかし<img>の方はうまくいきません。
Firefoxは、はみ出たままです。
IEは「_width="100%"」のせいで伸縮してしまうし、この設定がなければ、
コンテンツ画面が広がってしまいます。

何か対策はあるでしょうか？
構造を大きく変更することは無理な状況です。

#negative-margin{
float:right;
width:100%;
margin-left:-220px;
}

#contents{
margin:10px 10px 10px 220px;
}

#side{
float:left;
margin:10px 0 10px 10px;
width:200px;
}

pre, img{
overflow:auto;
_width:100%;
}

必要そうなところだけソースを抜粋しました。
<div id="negative-margin">
<div id="contents">
<img id="title" src="./hoge.jpg" width="1000" height="1000" />
<pre>
hoge
</pre>
</div>
</div>

<div id="side">
hoge
</div>

回答No.3

leap_day

こんにちは

こんな感じで・・・

<style type="text/css">
div{
overflow:auto;
}

#negative-margin{
float:right;
width:100%;
margin-left:-220px;
}

#contents{
margin:10px 10px 10px 220px;
}

#side{
float:left;
margin:10px 0 10px 10px;
width:200px;
}
</style>

<!--[if IE]>
<style type="text/css">
<!--
.div{
width:100%;
overflow-y:visible;
}
-->
</style>
<![endif]-->

<div id="negative-margin">
<div id="contents">
<div class="div">
<img id="title" src="./hoge.jpg" width="1000" height="1000" />
</div>
<div class="div">
<pre>
hoge
</pre></div>
</div>
</div>

<div id="side">
hoge
</div>

お礼

そうですよね。
<div>で囲めばできますよね。

No.2さんの回答より、<img>がインライン要素なので、<div>などで囲む必要があることはわかりました。

でも、既に存在するHTMLファイルがたくさんあり、それらをすべて変えるのは大変な作業です。
まぁ、これはスクリプトを書けば簡単に対応できそうですが、これらのHTMLファイルは複数の人が作成・編集するものなので、その人たちに今後<img>を<div>で囲むことを強制する必要が出てしまいます。

ですので、<img>に直接 CSSでスタイルを指定できないかなぁと思いまして。
でも、それは無理そうですね。

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

補足

今調べていたら・・・
display;block;
でインライン要素をブロック要素にできるみたいですね。
これでできそうです♪

回答No.2

goldfox

imgはインライン要素ですから……
pre, img{
overflow:auto;
_width:100%;
}
はやめて
#contents{
margin:10px 10px 10px 220px;
overflow:auto;
width:100%;
}
でどうですか？

お礼

インライン要素だからか・・・納得です。

提示されたCSSは既に試していたのですが、希望するレイアウトにはなりませんでした。

回答どうもです。

回答No.1

noname#39970

overflow:auto

だと使えない？

補足

pre, img{
overflow:auto;
_width:100%;
}

って使ってますけど・・・。