Div appearing outside its parent, bizarre sizing problems...
- by SLC
I have a list, which is going to be a menu.
I want to position it absolutely at the very top of the page.
My code looks like this:
<div id="sitenavmenu">
<div id="sitenavmenu-content">
<ul id="sitenavmenu-content-menu">
<li>Register</li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
<li>Contact Us</li>
</ul>
</div>
</div>
My CSS looks like this:
#sitenavmenu
{
position:absolute;
margin-left:300px;
top:2px;
width:500px;
}
#sitenavmenu-content-menu li
{
list-style-type:none;
display:inline;
padding-right:5px;
font-size:small;
}
The problem I have is, if I don't position it absolutely, it looks fine.
As soon as I position it absolutely (as it is shown above), the sitenavmenu div changes size, and although it shifts to the top, the sitenavmenu-content div appears below it. There is no other CSS as I have only just started, and I have checked padding etc. and everything is zero.
I just can't figure out why it's not working, and I don't want to hack it.
Edit: It's something to do with the height of #sitenavmenu. If I leave it, then the sitenav-content ends up horizontally centered in it, although #sitenavmenu is much taller. If I make them both the same size, so they should sit on top of each other, then the #sitenavmenu-content sits below.
