CSSのマージン/整列の問題

私は可能な限りこれを説明しようとします;）基本的に、私はサイドバー<div id="sidebar"></div>を持っています。私はコンテンツを含む直後の別のdivを持つことを計画しましたが、サイドバーがサイドバーの後ろに表示されていることを期待しているdivを固定しているため問題があります。サイドバーの後に別のdivを表示させるために、margin-left: 310px（310pxはサイドバーの幅です）を使用する必要があるため、問題です。サイドバーの310pxなしでページに100％の幅を占める代わりに、問題。CSSのマージン/整列の問題

それは説明するのは難しいですが、あなたは白のdivを見ることができhttp://freshbeer.lv/development/en/あなたが私のページを訪問した場合、それはwidth:700px;とmargin: 0 auto;とグレーのdiv要素があり、その中margin-left: 310px;とwidth: 100%;を持っています。私は灰色のdivは、背景の2つの画像の中間に整列することを期待しますが、白いdivは必要以上に多くのスペースを占めているので、それは起こりません。誰もが解決策を提案できますか？

出典

2012-01-30 Ilja

写真を追加しようとしましたか？ – CoffeeRain

あなたの質問を誤解しているかもしれませんが、#containerにはwidth: 100%を削除するか、width: autoに変更してください。

問題は親コンテナの幅が広がっていることです（ブラウザウィンドウの幅を十分にとっていれば、余白を追加することになります）。したがって、100％+ 310pxです。そのため、ブラウザウィンドウより310px広いです。

出典

2012-01-30 18:36:31

これを試してください。まず、あなたのサイドバーがあなたのスクリプトの最初にあることを確認してください。次に、メインセクションの幅を設定しないでください。代わりに、ちょうどdisplay:blockと言う。したがって、次のようなものがあります。

<html> 
<body> 
<div style="width:310px; float:left; background:#dddddd; height:500px;"></div> 
<div style="margin-left:310px; display:block; background:#ff0000; height:500px;"></div> 
</body> 
</html>

上記の例では、上部のdivはサイドバー、もう1つは本体のセクションです。私はテスト中に列を見ることができるように高さを追加しました。

出典

2012-01-30 18:40:22 James

CSSのマージン/整列の問題

答えて

関連する問題