这一定是我生命中最常出现的问题！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