html - CSSフローティングサイドバー

Question

ここで見ることができるように、私のページの 1 つのサイドバー領域で CSS の問題が発生しています: [ここをクリック]

margin-top を –2470px に変更しました。現在、サイドバーを表示する唯一の方法であるためです。ただし、ウィンドウのサイズを変更すると、ウィンドウがあちこちに浮かびます。

これをその場で修正するにはどうすればよいですか？

ありがとうございました！

編集：今ソートしました！みんなありがとう！

Answer 1

サイドバーを #container div の #content div と同じレベルに配置し、「float:left」と幅を両方に適用する必要があります。bootstrap や 960gs などの CSS フレームワークで確認できます。

<div id="container">
     <div id="content"></div>
     <div id="sidebar">your sidebar here</div>  
</div>

Answer 2

サイドバー「#primary」は、margin-top なしで「#container」内にある必要があります。これにより、サイドバーと「#content」が兄弟になり、すでに行った「#content」と「#primary」の float left を使用できます。サイドバー用。

body.single-property #container #content { 
  margin: 0; width: 68.4%%;
  float:left
}

body.single-property #primary.widget-area {
  float: right;
  margin-right: 70px;
  width: 16%;
}

body.single-property #container {
  margin: 0 -26.4% 0 0;
  width: 100%;
  min-width: 960px;

}

Answer 3

最初からコンテンツの幅を 100% にしないでください。そうして 20% の margin-right を追加すると、もちろんそこに収まるものは何もありません。コンテンツとサイドバーを float:left にして、すべての margin:20% ar を取り除きます。これはあなたが持っているものに基づく例です：

<div class="main">
<div class="content"></div>
<div class="primary"></div>
</div>

.main{width:100%;}
.main > div{float:left}
.main .content{width:70%:}
.main .primary{width:30%}

Answer 4

floatブロックからすべての ing プロパティを削除し、css テーブルを使用してスムーズで簡単なソリューションを提供することをお勧めします。

#main {
    display: table;
    padding: 0.5em 15px 0;
}

body.single-property #container {
    display: table-cell;
    width: 80%;
}

body.single-property #primary.widget-area {
    display: table-cell;
    width: 20%;
}

子ブロックからでも、要素からすべての浮動プロパティを削除することを忘れないでください。firebug を使用してテストしたところ、スムーズに動作しました。