center div 100％width div

Question

私はBlueprint CSSフレームワークを試していますが、全体的なレイアウトの仕方を理解するのは苦労しています。

青写真（私がこれまで理解していた限り）は、950pxでページ幅を設定します。私はあなたがいくつかの変更でそれを変更することができたと思いますが、いずれにしても幅がある必要があります。問題は、ページの主なコンテンツを950ピクセル幅にしたい場合でも、100％の幅のヘッダーとフッターが必要なことです。

私は950px幅のメイン "コンテナ" divの外にヘッダーとフッターを配置しました。ヘッダーdivを100％に設定しました。そして、私は950pxの幅（青写真の言葉でスパン24）を持っている "headerContent" div（メニュー、ロゴなどを含む）を持っています。しかし、headerContent divをヘッダdivの中央に配置したいと思います。

私はいつも "margin：0 auto"トリックを使用していましたが、何らかの理由でこれはまったく機能しません。

ここではHTMLです：

  <div id="header" class="blueheader"> 

       <div id="headerContent" class="span-24"> 

        <div id="logo" class="span-6"> 

         <a href="/"> 

          <img src="/images/expertinfo.png" width="230" height="62" /> 

          </a> 

        </div> 

        <div id="menucontainer" class="span-14"><ul id="menu"><li> 

<a href='/Services/Index'>TJ&#196;NSTER</a></li> 

<li> 

<a href='/About/References'>KUNDER</a></li> 

<li> 

<a href='/About'>OM OSS</a></li> 

<li> 

<a href='/About/Contact'>KONTAKT</a></li> 

</ul></div> 

        <div id="logindisplay" class="span-2"> 

          <a href="/Account/LogOn">Logga in</a> 



        </div> 

       </div> 

      </div> 

そしてここでは、ヘッダとheadercontentのCSSです：

#headerContent 
{ 
    overflow: auto; 
    zoom: 1; 
    margin: 0 auto; 

} 

#header 
{ 

    width: 100%; 
    position: relative; 
    margin-bottom: 0px; 
    color: #000;  
    margin-bottom: 0px; 
    overflow: auto; 
    zoom: 1; 

} 

オーバーフローやズームの部分は、私は空のdivを使用することを避けることを約読むだけで、別のトリックですが、含まれているdivをクリアするには、私は運がない彼らなしで試したので、問題とは何の関係もありません。

私が間違っていることは何ですか？

Answer 1

#headerContentの幅を設定する必要があります。の幅をdivに設定すると、デフォルト値がwidth:100%に設定されていないと、正常ではないはずです。

Answer 2

答えを見つけました。明らかにBlueprintフレームワークではなく、コンテナクラスでheaderContentにspan-24を使用するべきです。

 <div id="header" class="blueheader"> 
      <div id="headerContent" class="container"> 
       <div id="logo" class="span-6"> 
        <a href="@Url.Action("Index", "Home")"> 
         <img src="/images/expertinfo.png" width="230" height="62" /> 
         </a> 
       </div> 
       <div id="menucontainer" class="span-14">@Html.Raw(Html.Menu())</div> 
       <div id="logindisplay" class="span-2"> 
        @Html.Partial("_LogOnPartial") 
       </div> 
      </div> 
     </div> 

私はそれが前に機能しなかった理由を正確に理解して言うことができない、と私はレイアウトを簡素化するために、このフレームワークをしようとしていますので、それは、私を心配したが、これは理解することは難しく作っ：ここで働いていたものです。私が見ることができる限り、最初のコードでもうまくいったはずです...