My header is giving me trouble as there always seems to be a missing piece.
Here's the issue:
https://i.sstatic.net/bl6Px.jpg
This is my HTML structure:
<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>© @DateTime.Now.Year</p>
</div>
</div>
CSS Styles:
#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;
}
I suspect the issue lies within the body section, though I've attempted some fixes with no luck. Any suggestions would be greatly appreciated.
Regards,