CSSと親と子の問題、コンテンツの背景が正しくレイアウトされていない

Question

私は自分のウェブサイトのコンテンツセクションを構築していて、フロートを使って物事を並べることができるかどうかテストしたかったのです。 ...私のウェブサイトでは、2つのボックスを隣に置くことができましたが、バックグラウンドのコンテナは1000pxの中心に置かれ、コンテンツの背景全体がいっぱいです。一度あなたは私のサイトを見て理解するでしょう...私は問題が私のCSSにあることを知っています、助けてください。私のサイトの残りの部分は100％の背景を含んでいて、その中に1000pxのコンテナを作っていました。私はトップバナーとメニューバーで動作していたので、なぜ今は動作していないのかわかりません。いつもありがとう！

サイト：

http://www.nestudiosonline.com/test.php

HTML：

は

<div id="contentbackground"> 
    <div id="content"> 
    <div id="flashbanner"></div><div id="test"></div> 
    </div> 
    </div> 

CSS：

@charset "utf-8"; 

#contentbackground 
{ 
width:100%; 
height:auto; 
margin-top:0px; 
margin-left:0px; 
margin-bottom:0px; 
margin-right:0px; 
padding-top:0px; 
padding-left:0px; 
padding-bottom:0px; 
padding-right:0px; 
border:0 
} 

#content 
{ 
background-color:#FFF; 
/* for IE */ 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
filter:alpha(opacity=80); 
/* CSS3 standard */ 
opacity:.8; 
width:1000px; 
height:auto; 
margin-top:0px; 
margin-left:auto; 
margin-bottom:0px; 
margin-right:auto; 
padding-top:10px; 
padding-left:5px; 
padding-bottom:5px; 
padding-right:5px; 
border:solid; 
border-width:1px 
} 

#flashbanner 
{ 
float:left; 
display:inline; 
width:500px; 
height:200px; 
margin:0px; 
padding:0px; 
border:solid; 
border-width:1px 
} 

#test 
{ 
float:right; 
width:400px; 
height:200px; 
margin:0px; 
padding:0px; 
border:solid; 
border-width:1px 
} 

Answer 1

私は私が正しく理解すればわからないが、あなたの#contentにoverflow: hiddenを置くことを行う必要がありますすべてがクールです。

EDIT：同じ要素にclear: bothもあります。

編集：Firebugでこれらの変更を適用したところ、正常に動作しているようです。

Answer 2

#linksbackgroundと#contentの最初にoverflow:hidden;を追加します。それであなたはあなたの体の背景を設定したことを理解しなければならないので、この動作は論理的です。必要なものを実現するには、bodyタグの下にラッパーdivを作成し、</body>の前に閉じます。このdiv要素のid #wrapperを付けて、次のプロパティ

#wrapper { 
    background: url("../images/olddkeshant3.jpg") no-repeat scroll 0 0 transparent; 
    margin: 0 auto; 
    width: 1000px; 
} 

を追加し#bodybackgroundから背景を削除します。

バックグラウンドを特定の位置に配置するには、バックグラウンドプロパティの上記の値0 0を必要に応じて変更します。

割合Xは、（水平）またはダウンダウン（水平に対して）を横切る点のX％ 有する画像又は（ 垂直用）（用 垂直）要素のパディングを横切る点X％ を整列しますボックス。 たとえば、値のペアが '0％ 0％'の場合、画像の左上隅は、パディングボックスの左上隅の に揃えられます。 の値のペア '100％100％'は、右下に画像の右下 のコーナーを置きます。 パディングボックスのコーナー。 の値のペア「14％84％」の場合、画像全体の14％ ポイントと84％ポイントは、ポイント14％に配置され、84％ のパディングボックスを下にして配置されます。

ソース：http://www.w3.org/TR/CSS2/colors.html#propdef-background-position