「2列」タイプのWebサイトを取得する方法を考え出そうとしています. まあ、右の柱が右に浮いた本体ですね。
通常、ボディの前にフロートし、ボディに右マージンを設定して、目的を達成します。
ただし、Google と SEO の場合、右側の列はメイン コンテンツの後に配置する必要があり、テキスト インデックスの列よりも優先順位を高くする必要があるため、よりクリエイティブになる必要があります。
ガッ。
だから私はこれを思いつきます。
批評してください：
<div id="bodycontainer" style="border:1px solid #0f0; width:800px; margin-left:auto; margin-right:auto; overflow:hidden;">
<div id="bodyoffset" style="border:1px solid #f00; width:100%; margin-left:-210px; overflow:hidden; float:left;">
<div id"bodyrestrict" style="border:1px solid #ff0; margin-left:210px;">
Main Column<br/>
Some text goes here.<br/><br/>
I want this column to fill up the remainder space that is filled by the...
</div>
</div>
<div id="newscolumn" style="border:1px solid #00f; width:200px; float:left;">
...Right Column
</div>
<p style="clear:both;"></p>
bodycontainer は全体の幅を制御し、bodyoffset は負の左余白を持っているので、newscolumn を右にフロートさせることができますが、bodyrestrict は負の余白を正の余白でオフセットすることによって本文をインラインに戻します。
いくつかの魔法のブードゥー ジガリー ポケリーですが、うまくいくようです。
より良い方法はありますか？
明らかに、body 要素が実際にどうあるべきかはわかりません (そして、できれば JavaScript ルートをたどりたくありません)。したがって、100%-200px などの幅を設定することはできません (できれば良いのですが)。幅を固定するのではなく、画面全体に拡大したいのです。
ありがとうサイモン