メインの中心divの隣に別のdivを浮かべて

Question

私はウェブサイトを持ち、全体がコンテナに包まれています。このコンテナはmargin：autoの中央に配置されます。私は、この中心のコンテナの右側にコンテンツの一部を浮かべて、ユーザがブラウザウィンドウのサイズを変更してもそれを横に並べるようにしたいと思います。本当に簡単な方法があるかと思いますこれは、別の大きなdivを追加するのではなく、幅を与えて中央の部分を左側に、コンテンツの部分を右側に浮かべます。ありがとう！

Answer 1

これを行う方法はフローティングです。コンテナが幅の合計よりも小さい場合を除き、常に一緒に固執します。

ヒント：内側のdivを保持するのに十分な幅の容器を用意してください。そうでない場合、ユーザはより狭いウィンドウを有し、他のウィンドウを下に表示する。

Answer 2

コンテナdivにプロパティpositionを渡します。コンテナdiv要素の最初の子としてあなた浮動div要素を配置し、私はそれが動作すると思いますが、テストされていないが、

わかりましたが、それをテストし、それを

#floatingDiv 
{ 
    position: absolute; 
    top: 0; 
    right: -{widthOfFloatedDiv}; 
} 

を与え、それが

<div style="position: relative; width: 980px; margin: 0 auto; border: 1px solid #000; height: 400px;"> 
    <div style="position: absolute; top: 0; right: -200px; width: 200px;"> 
     <p>Floated DIV</p> 
    </div> 
    <p>container div</p> 
</div> 

Answer 3

が上のピギーバック作品@NickAllenでは、サイドバーの幅がプライマリコンテナのセンタリングに含まれないように、絶対配置を使用します。

#container { 
 
    position: relative; 
 
    width: 500px; 
 
    border: 1px solid #f00; 
 
    margin: 0px auto; 
 
} 
 
#sidebar { 
 
    position: absolute; 
 
    width: 200px; 
 
    right: -200px; 
 
    border: 1px solid #0f0; 
 
}

<div id="container"> 
 
    <div id="sidebar"> 
 
    [ sidebar content ]<br> 
 
    [ sidebar content ]<br> 
 
    </div> 
 
    [content]<br> 
 
    [content]<br> 
 
    [content]<br> 
 
</div>

Answer 4

たぶん私はあなたの質問を誤解していますが、これはあなたが望むものではありません。

#container { 
 
     width: 960px; 
 
     margin: 0px auto; 
 
    } 
 
    
 
    #sidebar { 
 
     float: right; 
 
    }

<div id="container"> 
 
     <div id="sidebar"> 
 
     some content 
 
     </div> 
 
    </div>

Answer 5

古い質問が、他以来貢献答えは、「何か」というものが欠けていて、まだGoogleの上にあります。これを達成する最もシンプルでクリーンな方法は、2つのラッパーです。以下のCSSで

<div class="bigWrapper"> 
    <div class="sidebar">Hello, I'm your sidebar</div>  

    <div class="smallWrapper"> 
    Put the thing you want to center here. 
    </div> 
</div> 

は：

.bigWrapper { 
    width: 1000px; 
    height: auto; 
    margin: auto; 
} 

.smallWrapper { 
    width: 500px; 
    height: auto; 
    margin: auto; 
} 

.sidebar { 
    width: 250px; 
    float: left; 
    height: auto; 
}