2011-08-01 4 views
0

私のウェブサイトで私はレイアウトをしようとしています。私のページに、左側のサイドバー/メニューエリアとメインのコンテンツエリアが右側にくるようにしようとしています。私は主なコンテンツ領域を画面の右端に止めたいので、領域をwidth: 100%にしようとしましたが、これは正しく機能していないようです。 100%の幅であるように思わが、その後右にシフト(したがって、画面の側面をオフに行く。私のメインコンテンツエリアが画面の端に止まらないのはなぜですか?

コードと結果は私がすべて維持するために、これを達成するにはどうすればよいhttp://jsfiddle.net/KallDrexx/xmmSV/5/

で見つけることができますページ内のテキスト?

答えて

2

は、width:100%position:absolutemargin-left:160pxleft:160pxを置き換える削除すれば完了です。

+0

ほとんどがうまくいきました。唯一の問題は、クロムではIEのように青い領域の最後には行かないということです。右から150ピクセルほど良いピクセルです。何か案は? – KallDrexx

+0

問題がないと:)。どうもありがとう! – KallDrexx

0

#main-areaは100%の幅に設定されています(この場合はbodyなので、ページ幅の100%になります)。あなたはそれを160px左に移動しています。実際の位置は、本体の100%+ 160pxです。

流出する必要がありますか?そうでない場合は、#main-areaの幅をピクセル単位で設定できます。あなたのmain-areaのために

+0

ページをリロードすると、100%幅の 'page' divにすべてをラップしましたが、'#main'( '#page 'の内側にあります)はまだ画面を過ぎています – KallDrexx

+0

Alochciはそれを持っています - あなたの 'page' divはまだ本体幅の100%ですので、絶対配置されたdivはコンテナの100%であるdivの100%になります(' body')。 –

0

width: 100%right: 0pxと置き換えようとすると、main-areaとなる可能性があります。

これは基本的に、ボックスの右側が親の左側に0pxであることを示しています。 main-areaは、依然としてページ幅に合わせて拡大/縮小できます。

関連する問題