I have the following HTML markup and I want the menu div tag to always be 5px away from the bottom border of the parent container.
I can manually through trial and error position it using margin-top, but if I were to change the logo or modify the div size I'd have to change this value again using trial and error. A much better solution would to tell if to always be 5px away from the bottom instead of telling it to be X pixels from the top.
Why doesn't this work though?
<body>
<div id="header">
<img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />
<ol id="topuserbar">
<li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
<li><a href="#">Mis Anuncios</a></li>
<li><a href="#">Perfil</a></li>
<li><a href="#">Cerrar Sesion</a></li>
</ol>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
#header
{
background-image: url('images/headerBackground.png');
background-repeat:repeat;
width:auto;
}
#topuserbar
{
border: 1px solid red;
font-family:Georgia;
font-size:large;
float:right;
margin-top:45px;
}
#topuserbar ol
{
}
#topuserbar li
{
display:inline;
margin-left:10px;
color:#fff;
}