二段組にする(マージンで調整)

動作ブラウザ 【 IE:4.0  NN:6.0  Safari:1.0
Internet Explorer Netscape Navigator Firefox iCab Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 7.0 8.0 1.x 2.x 1.x 2.x
Windows × - × × × × - -
Macintosh × - - × × × × ×
UNIX - - - - - - × × × × - -
Dreamcast - - - - - - - - - - - -

ポイント margin:0px 0px 0px 50%;
説  明 二段組にするにはfloatプロパティを使います。左側に表示する段にはfloat:leftを指定します。右側のボックスはmarginの左側を50%のように指定することで2段組にできます。
サンプル <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>二段組にする(マージンで調整)</title>
<style type="text/css"><!--
.container {
width:100%;
border:1px gray dashed;
background-color:#eef;
padding:0px;
margin:0px;
}
.left {
float:left;
width:49%;
height:80%;
background-color:yellow;
border:1px red solid;
margin:0px 0px 0px 0px;
}
.right {
width:49%;
height:120%;
background-color:yellow;
border:1px red solid;
margin:0px 0px 0px 50%;
}
--></style>
</head>
<body>
<div class="container">
<h1>二段組みにします。<h1>
<div class="left">
 ここの文章はdivタグとスタイルシートを使って二段組になるように設定しています。こっちは左側。
</div>
<div class="right">
 ここの文章はdivタグとスタイルシートを使って二段組になるように設定しています。こっちは右側。
</div>
</div>
</body>
</html>
補足説明 Opera 7でも正しく動作します。

■サンプルを実行する >>実行
■各ブラウザでの動作結果を見る >>View!