css - 当 float 对象元素在内部时填充

Question

我有下面的 html:

<div class="wrapper">
    <div id="header">
        <img alt="Giannis Simeonidis" src="logo2.png" width="300" height="220"/> 
        <object width="550" height="200" id="banner">
            <param name="movie" value="banner.swf" />
            <embed src="banner.swf" width="550" height="200"  
                    wmode="transparent" 
                    type="application/x-shockwave-flash">
            </embed>
        </object>
        <div id="menu">
          <object width="600" height="20">
             <param name="movie" value="menu.swf" />
             <embed src="menu.swf" width="600" height="20"  
                    wmode="transparent" 
                    type="application/x-shockwave-flash">
              </embed>
         </object> 
        </div>
    </div><!--End of header-->
</div>

CSS 是:

#wrapper{
 /*background: url(header_bg.jpg) repeat-x;*/
 background: url(container_bg2.png) repeat-y;
 margin: 0 auto;
 margin-top: 20px;
 width: 900px;
}


#header{
 width: 900px;
 padding: 0 10px;
}

#banner{
 float: right;
}

#menu{
 clear: right;
 padding-left: 13px;
}

由于某些原因，应用于#header 的正确填充不起作用；有什么想法吗？

Answer 1

包装器的宽度为 900px。 header的宽度为900px + 10px Left Padding + 10px Right Padding = 920 像素。

您正在尝试将 920px 的 div 放入 900px 的 div 中。要么使包装器更宽到 920 像素，要么使标题更短到 880 像素。