- 締切済み
【CSS】ウインド幅を変えた際の表示
以下のようなHTMLを用意しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style> <!-- #aaa { float:left; z-index : 1; } #bbb { float:right; z-index : 2; background-color : #ffffff; } --> </style> </head> <body> <div id="aaa">aaaaaaaaaaaaaaaaaaaa</div> <div id="bbb">bbbbbbbbbbbbbbbbbbbb</div> </body> </html> （１）ウインド幅が充分に広い場合、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb│ （２）ウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb│ （３）さらにウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaa bbbbbbbbbbbbbb│ <-スクロールバー-> このhtmlを改造して以下の様な動作を実現したいです。 （N１）ウインド幅が充分に広い場合、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb│ （N２）ウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbb│ （N３）さらにウインド幅を狭くしていくと、以下の様に表示されます。 │bbbbbbbbbbbbbb｜ <-スクロールバー-> 以下の様に修正してみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style> <!-- #aaa { float:left; z-index : 1; } #bbb { float:right; z-index : 2; background-color : #ffffff; } --> </style> <script> window.onload = function(){ i = function(id){ return document.getElementById(id) }; i('aaa').style.width = i('aaa').innerHTML.length ; } </script> </head> <body> <div id="aaa">aaaaaaaaaaaaaaaaaaaa</div> <div id="bbb">bbbbbbbbbbbbbbbbbbbb</div> </body> </html> （N１）から（N２）までの動作はFF及びOperaでは実現できましたが、IEでは変わらずでした。 （N１）、（N２）、（N３）のように動作するにはどうしたらよいでしょうか？
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
position:absoluteでわからなければ、 もしホームページビルダーをお使いなら、「どこでも配置モード」にして、bbbを右寄せしてみてください。
- SAYKA
- ベストアンサー率34% (944/2776)
#aaa と #bbb を nowrap ・・・或いは上位blockを基準にabsoluteとか・・・
補足
SAYKAさん ご回答ありがとうございます。 #aaa と #bbbに white-space: nowrap; を付けてみましたが、変わらずでした。 上位blockを基準にabsoluteってのはよく解りません。
お礼
talooさん ご回答ありがとうございます。 ホームページビルダーはあいにく持ってません。 エディター（メモ帳）に直接かいております。 しかし、ホームページビルダーって便利そうですね。 機会があったら試してみます。