Tableとdivタグで、レイアウト

締切済

質問者：chikachikachie
質問日時：2011/04/20 07:05
回答数：2件

Tableとdivタグで、画像のようなレイアウトを作りたいのですが。

黒い線を二本入れた簡単なレイアウトなのですが、

どのブラウザーで見ても、（どの画面の大きさで見ても）

同じような形になるように、tableとdivでレイアウトするにはどうしたらよいでしょうか。

metaタグなど余計なものは書かなくてもかまいませんのでよろしくおねがいします。

（後パーセンテージもいくつでも構いません、適当に書きました）

tableで書いた場合と、divで書いた場合と教えてください。

縦横ともに長さ100％で表示したいです。

パーセンテージを使うとかける気がするのですが、忘れてしまいました。

ぜひよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： sora1tora2
回答日時：2011/04/23 12:02

こんにちは

大まかですがこんな感じでしょうか。

Htmlタグ

<body>
<div id="top">
<div id="top-left">
</div>
<div id="top-space">
</div>
<div id="top-right">
</div>
</div>
<div id="bottom">
<div id="bottom-left">
</div>
<div id="bottom-space">
</div>
<div id="bottom-right">
</div>
</div>
</body>

CSS

* {
margin: 0px;
padding: 0px;
}
body, html {
margin: 2% 0%;
padding: 0px;
width: 100%;
height: 96%;
background-color: black;
}
#wrapper{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#top {
margin: 0px;
padding: 0px;
height: 70%;
}
#top-left {
margin: 0px;
height: 90%;
width: 65%;
float: left;
background-color: white;
}
#top-space {
margin: 0px;
width: 5%;
height: 100%;
float: left;
}
#top-right {
margin: 0px;
height: 90%;
width: 30%;
float: left;
padding-bottom: 0px;
background-color: white;
}
#bottom {
margin: 0px;
padding: 0px;
height: 28%;
}
#bottom-left {
margin: 0px;
height: 100%;
width: 65%;
float: left;
background-color: white;
}
#bottom-space {
margin: 0px;
width: 5%;
height: 100%;
float: left;
}
#bottom-right {
margin: 0px;
height: 100%;
width: 30%;
float: left;
background-color: white;
}

％は適当ですのでお好みで。