部分的に3段になる段組構造のCSS
みんなまたまた助けて!
http://saji.s39.xrea.com/img/page.jpg:image:w300
この画像のような感じの段組にしたいんだけど、#column1と#column2がうまいこと並んでくれません。
ボクが書いたCSSは以下のような感じなんですが、どうしたらいいとかアドバイスがあればぜひ、なんとかお願いします。
#menuが20%、#column1と#column2がそれぞれ40%で、tableと#toptextは#menuを除いた80%の中央になるようにしたいと思っているわけです。#toptextはどうにでもなるので、無視して構いません。
#mainのtext-align:centerはIEでtableを中央に表示するためにやむを得ず指定しています。
#main { position:relative; margin:0px 0px 0px 0%; padding:0px 0% 0px 0%; text-align:center; } #menu { text-align:left; position: absolute; left: 0px; color: #fff; width: 20%; } #column1 { text-align:left; position:absolute; width:40%; left: 0px; margin:0px 0px 0px 20%; padding:0px 0px 0px 0px; } #column2 { text-align:left; position:relative; margin:0px 0px 0px 60%; padding:0px 0% 0px 0%; } #main table { margin-right:auto; margin-left:auto; }
あと、その時のhtmlはこんな感じ。一応
<html> <head> </head> <body> <div id="menu"> </div> <div id="main"> <table width="520px"> <tr> <td align="center" width="260"> </td> <td align="center" width="260"> </td> </tr> </table> <div id="toptext"> </div> <div id="column1"> </div> <div id="column2"> </div> </div> </body> </html>
どなたか・・・。一つよろしくお願いします・・・。IEなんて消えてなくなれ!この世のブラウザが全てMozillaだったらこんなに悩まなくていいのに。
つーかボクがpositionについてよくわかってないだけか。切腹!