html - Html/css の高さが他の div と異なる

Question

ヘッダーに問題があります。常に欠落している部分があります。

これが問題です：

http://imgur.com/DruqmsI

私のHTML：

<div id="wrapper">
        <div id="header">
            <div id="header-col-left">
                <p class="site-title">@Html.ActionLink("Immo QR", "Index", "Home")</p>          
            </div>
            <div id="header-col-right">
                <div id="login">
                    @Html.Partial("_LoginPartial")
                </div>
                <div id="main-menu">
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("Who are we", "WhoAreWe", "Home")</li>
                        <li>@Html.ActionLink("What do we do", "WhatDoWeDo", "Home")</li>
                        <li>@Html.ActionLink("Contact us", "ContactUs", "Home")</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="body">
            <div id="user-menu">
                @if (Request.IsAuthenticated)
                { 
                    <ul id="account-menu">
                        <li>@Html.ActionLink("My profile", "MyProfile", "Profile")</li>
                        <li>@Html.ActionLink("Links", "Links", "Profile")</li>
                        <li>@Html.ActionLink("History", "History", "Profile")</li>
                        <li>@Html.ActionLink("Credits", "Credits", "Profile")</li>
                        <li>@Html.ActionLink("Settings", "Manage", "Account")</li>
                    </ul>  
                }
            </div>
            <div id="content">
                @RenderBody()
            </div>
        </div>
        <div id="footer">
            <p>&copy; @DateTime.Now.Year</p>
        </div>
    </div>

CSS:

#body 
{

margin: 0 auto;
max-width: 960px;
padding-top: 5%;

}

#user-menu 
{
float: left;
width: 15%;


}
#content 
{
float: left;
width: 85%;
margin-top: 15px;

}
#header 
{

}

#header-col-left p
{
float: left;
display: block;
width: 50%;
background-color: orange;
text-align: center;
font-size: 30pt;

color: white;       
}

#header-col-left a
{
    color: lightgray;
}

#header-col-right 
{
float: left;
display: block;
width: 50%;
background-color: orange;
}

問題は体だと思いますが、いろいろ試してみましたが、うまくいきませんでした。

あいさつ

Answer 1

とを に設定background-color: orangeし#headerます。#header-col-rightheader-col-left p

問題は、ヘッダーの右側部分の高さがヘッダーの左側部分よりも大きいことです。より多くの情報が含まれているためです。