div 3ペインで発狂

html + css + jquery(javascript) で、また発狂

div + css で3ペイン、中央が伸縮、それぞれセンタリング、縦方向に中央寄せ
たったこれだけの事をやるのに

div#top_left{
float: left;
width: 60px;
background-color: #779977;
text-align: center;
vertical-align: middle;
}

div#top_middle{
float: left;
text-align: center;
vertical-align: middle;
}

div#top_right{
float: right;
width: 60px;
background-color: #997777;
text-align: center;
vertical-align: middle;
}

ここで、float で、width 指定なしだと text-align: center; は効きませんだとー
中央は伸縮なんだよっ
同様に、vertical-align: middle; も height 指定なしだと効きませんだとー

中に div を作ってとか、それじゃスクリプトからの投入先も変更して、自然とスパゲッチ化
もぅ、昔みたいに table でいいんじゃないかと...

ということで、こちら を参考にさせていただきました

コメント