css - 2 列のレイアウトで右のフローティング div が下に押されないようにするにはどうすればよいですか?

Question

中央の背景 div 内に単純な 2 列のレイアウトがあります。

2 つの列は、ページの中央にある大きな div 内にあります。問題は、右の列が 1 ～ 2 ピクセル離れている可能性があり、最初の div の下部にプッシュされることです。どうすればこれを防ぐことができますか? 2 番目の列を周囲の div の右側に押し出すことをお勧めします。

Answer 1

2 番目の列が最初の列の下に配置される理由は、両方の列幅の合計がそのコンテナーのサイズを超えているか、その列にフロート (左/右) を適用していないためです。

2 番目の列を周囲の div の右側の外側に押し出すことをお勧めします

つまり、コンテナから列を出したいということです。これを達成するために負の値を適用できます。

例：

.right{
    position:relative;    /* apply position relative */
    right:-20px;          /* out from the container by 20px on right */
}

ここhttp://jsfiddle.net/qiqiabaziz/RseApをご覧ください。