這一定是我生命中最常出現的問題！100％DIV內的頑固固定DIV

我必須在一個100％的DIV中放置一個固定的DIV（800px），並且一如既往地在除IE之外的任何地方都能正常工作。我已經嘗試了舊的「文本對齊」技巧，但這次沒有，我只是無法讓它工作。

如果你想檢查其實際的網頁www.chunkydesign.com和任何答案將不勝感激。

下面是HTML（CSS下面）

<body> 

    <div id="navContainer"> 

     <div id="navTopSpacer"></div> 

     <div id="navMain"> 

      <div id="navContent"> 

       <div id="navLogo"></div> 

       <div id="navLinks"> 

        <h1>SERVICES ABOUT PORTFOLIO CONTACT</h1> 

       </div> 

      </div> 

     </div> 

     <div id="navBotSpacer"></div> 

    </div> 

</body>

魔鬼代碼本身：

體{ 填充：0像素; margin：0px; }

navContainer {

width: 100%; 
height: 110px;

}

navTopSpacer {

width: 100%; 
height: 12px; 
background-image: url('../images/core/nav_topspacer.jpg');

}

navMain {

width: 100%; 
height: 88px; 
background-image: url('../images/core/nav_main.jpg');

}

navContent {

text-align: center; 
width: 800px; 
height: 88px; 
margin-left: auto; 
margin-right: auto;

}

navLogo {

float: left; 
width: 164px; 
height: 88px; 
background-image: url('../images/core/logo.png'); 
background-position: 0px 20px; 
background-repeat: no-repeat;

}

navLinks {

float: right; 
width: 400px; 
height: 88px;

}

navLinks H1 {

font-family: Arial, Verdana, sans-serif; 
text-align: right; 
font-size: 13px; 
color: #FE9900; 
font-weight: 600; 
padding-top: 40px; 
word-spacing: 15px; 
letter-spacing: 1px; 
margin: 0px;

}

navBotSpacer {

width: 100%; 
height: 10px; 
background-image: url('../images/core/nav_botspacer.jpg');

}

來源

2010-06-04 William Hand

通過您留下您的文檔類型」上述評論重新讓IE進入怪癖模式，這使得渲染成爲一場噩夢。

刪除評論，並沒有任何文字，空格或任何超出您的文檔類型聲明。

來源

2010-06-04 11:44:52 Paul

非常感謝保羅，我從來不知道在Doctype激活的怪癖模式之上的評論，現在作爲瀏覽器解釋的第一件事情是有道理的。現在一切似乎都很好。乾杯。 – 2010-06-05 10:42:50

嘗試使用這個標記：

<div id='header'> 
    <div class='center'> 
     <div id='logo'><h1><a href='' title=''></a></h1></div> 
     <ul id='navigation'> 
      <li>SERVICES</li> 
      <li>ABOUT</li> 
      <li>PORTFOLIO</li> 
      <li>CONTACT</li> 
     </ul> 
    </div> 
</div>

和造型是這樣的：

#header{ 
background:#cae1e9; 
border-top:12px solid #7ebdce; 
border-bottom:10px solid #a8d2de; 
height:88px; 
} 
.center{ 
width:800px; 
margin:auto; 
}

然後說不定浮標誌的左側和浮導航向右或做任何你想要的。但是這種makup更容易理解，也許看到錯誤在哪裏。

結合保羅給你的答案，我想就是這樣。

來源

2010-06-04 11:57:27 Gavrisimo

感謝GaVrA的建議，以及Paul的建議，它解決了這個問題。乾杯。 :-) – 2010-06-05 10:43:32

100％DIV內的頑固固定DIV