CSS - Fixed-Fluid Columns

Question

私のサイトの本文では、広告のための固定幅（300px）の右端に1つ、広告などのために左側に2つの列を作成しようとしています。ページ上に残りのスペース。これはCSSでどのように達成できますか？

Answer 1

CSS：HTMLで

#right-column{ 
width:300px; 
float:right; 
} 

#other-column{ 
float:left; 
width:100%; 
padding-right:20px; /*to prevent text overlap as suggested in the comment*/ 
} 

：

<div id='right-column'> 
<!-- ads here --> 
</div> 
<div id='other-column'> 
<!-- content here --> 
</div> 

Answer 2

あなたはまた、YUI: CSS Grid Builderをチェックアウトする場合があります。あなたが探しているグリッドレイアウトを指定するシンプルなWebインターフェイスであり、希望のレイアウトを得るためにYUI Grids CSS frameworkと組み合わせて使用​​できるhtmlコードを提供します。 YUI Grids CSSフレームワークの素晴らしい点の1つは、good cross browser supportということです。異なるブラウザ間で作業する時間を節約できます。また、グリッドビルダーから提供されているコードをリバースエンジニアリングして、独自の方法でアイデアを得ることもできます。

1. ボディサイズ：100％
2. ボディ列：サイドバーを右に300ピクセル

Answer 3

ここでは、YUIで使用したいと思うでしょう設定：次のようにご希望のレイアウトを取得するためにCSSグリッドBuilderがありますadsense広告を掲載するためのツールです。generate fixed liquid columns

Answer 4

私が見つけた1つの解決策は、右の列を右に浮かべ、左の列に左と0と右：300pxの絶対位置を与えることです。これは、幅を80％とした場合のように流動化しますが、親コンテナとは別の方法で相対的になります。ここで

は例です：あなたはこれを見つけるかもしれない http://jsfiddle.net/tkane2000/dp9GZ/

1つの問題は、それが絶対的だから、それは当然それ以下の要素を押し下げないであろうということです。

もう1つの考えられる解決方法は、左の列に与えることです。 幅：100％ パディング右：300px;

と右側（固定幅）の列： 位置：絶対： 先頭：0; 権利：0;

左の列にボックスサイズ：枠線を設定する必要があります。

これもいくつかの制限事項です。頭に浮かぶのは、左の列に境界線を設定してそれぞれを分離するとしたら、境界線が右の列の反対側にあることです。

Answer 5

CSS：

.column-right { 
    float: left; 
    width: 100%; 
    height: 200px; 
    background-color: red; 
} 

.column-right .column-content { 
    margin-left: 250px; 
} 

.column-left { 
    float: left; 
    margin-left: -100%; 
    width: 250px; 
    height: 200px; 
    background-color: green; 
} 

HTML：

<div class="column-right"> 
    <div class="column-content"> 
     <strong>Right Column:</strong><em>Liquid</em> 
    </div> 
</div> 
<div class="column-left"> 
    <strong>Left Column:</strong><em>250px</em> 
</div>