Div's not showing in parent div

I am trying to get div's to appear in the parent div code can be found below:

<div id="header">
    <div class="header-left">
    开发者_StackOverflow    LOGO
    </div>
    <div class="header-right">
        OPTIONS
    </div>
</div>

#header
{
background-color:#FFFFFF;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom:2px solid #C0C0C0;
border-left:2px solid #C0C0C0;
border-right:2px solid #C0C0C0;
color:#ff3427;
display:block;
font-family: "Book Antiqua", "Cambria", serif;
margin:auto;
width:980px;
position:relative;
}

.header-left
{
color:#ff3427;
display:block;
font-family: "Book Antiqua", "Cambria", serif;
font-size:32px;
float:left;
text-align:left;
width:320px;
position:static;
}

.header-right
{
color:#ff3427;
display:block;
font-family: "Book Antiqua", "Cambria", serif;
font-size:12px;
float:right;
text-align:right;
width:655px;
position:static;
}

You can find what it looks like currently at: http://mytvisfree.com

I want the two div classes to appear in the header div, but it isn't appearing, and I can't figure out why, any help would be appreciated.

You need to add a clear after your last div, because floated elements are removed from the normal page flow, so as a result, clears are needed. (See also: All About Floats and CSS positioning)

HTML code:

<div id="header">
    <div class="header-left">
        LOGO
    </div>
    <div class="header-right">
        OPTIONS
    </div>
    <div class="clear"></div>
</div>

CSS additional code:

.clear {
    clear: both;
}

Another way to show parent div

HTML code:

<div id="header">   
   <div class="header-left">LOGO</div>  
   <div class="header-right">OPTIONS</div>
</div>

CSS additional code:

#header { overflow:hidden; }  

I know the above solutions work because I have had them in the past. But today, I had this situation where I just put position: relative on the inner div and it fixed the problem.