标题的CSS问题

Question

我是初学者，我遇到了一些问题。我试图在左边做标识的简单标题和标题左侧的一些元素（util）。代码如下。它工作，但我将标题背景设置为绿色，当我打开页面时它丢失了。我做错了什么？

<div id="wrapper">
        <div id="header">
            <div id="logo">                
            </div>
            <div id="util">
                <a href="#">Vladimir Vucetic</a>
            </div>
        </div>        
    </div>

body 
{
    padding: 0;
    margin: 0;
    font: small Arial, Helvetica, Verdana, sans-serif;
}

#wrapper 
{
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;   
    margin-left: 20%;
    margin-right: 20%;
}

#header
{ 
    background-color: Green;    
}

#logo
{
    background: url(/images/logo.gif);  
    background-repeat: no-repeat; 
    width: 94px;
    height: 24px;
    float: left;
}      

#util
{
    padding: 0;     
    float: right;    
}

Answer 1

您的标题中已浮动元素。这就是为什么它表现得像没有孩子一样。所以试试

#header
{ 
    background-color: #0f0;
    overflow: hidden; 

}

Answer 2

这看起来像是一个清算问题。由于父容器中有两个浮动元素，因此您需要“清除”它们。你可以用多种方式做到这一点。

1）将以下内容应用于标题：

#header
{
  overflow:hidden;
  height: 1%;
}

OR

2）在关闭标题div之前添加清除div

<div style="clear:both"></div>