【WEBデザイン】CSSによるレイアウトについて
初心者です。
添付「図sample-chrome1」の表示にて、「領域b-x」「領域b-y」内の文字位置を、それぞれ縦の中心に配置したいと思っています。
また、先ほどの図はブラウザ「Chrome」での表示ですが、ブラウザ「InternetEexplorer」では添付「図sample-ie」のように「領域b-*」の表示が異なってしまいます。
この２つの問題を解決するためのお知恵をお貸しいただければと思っています。
因みに、添付「図sample-chrome2」のように、「領域a」の行数は可変となり、「領域b-*」の高さもそれに合わせて上下半分ずつで可変としたいと思っています。
また、境界線に「border:inset」を使用して図のように表示させたく、＜table＞タグでの境界線では思うようにいかず、使用を断念した経緯があります。
尚、ソースコードは下記の通りとなります。
<html>
<head>
<style type="text/css">
#tbl{ display:table; width:300px; font-size:small; }
#a { display:table-cell; vertical-align:middle; padding:0px; width:196px;
border:inset 2px rgb(230,230,230); background-color:rgb(255,200,200); }
￥ #b { display:table-cell; vertical-align:middle; padding:0px; width:100px; height:0px;
background-color:rgb(255,255,200); }
#x { display:inline-block; vertical-align:middle; padding:0px; width:100%; height:50%;
text-align:center; background-color:rgb(255,200,255); border:inset 2px rgb(230,230,230); }
#y { display:inline-block; vertical-align:middle; padding:0px; width:100%; height:50%;
text-align:center; background-color:rgb(255,200,255); border:inset 2px rgb(230,230,230); }
</style>
</head>
<body>
<div id='tbl'>
<div id="a">
文章１行目 領域a<br>
文章２行目<br>
文章３行目<br>
文章４行目
</div>
<div id="b">
<div id="x">領域b-x</div>
<div id="y">領域b-y</div>
</div>
</div>
</body>
</html>
勉強不足で、間の抜けた内容もあるかも知れませんが、何卒ご協力の程を宜しくお願い致します。
お礼
やっと解決しました。セルの数値が固定していました。数値変更で解決です 有り難うございます．このようなエラー防ぎのプログラムが欲しい