Position a <div> into another <div> - html

Question

im just trying to do a normal Navigation but i seem to fail at it since i haven't done something like that in a long time. So here is what i got:
<div id="Top">
<div id="Navi">
<div class="Link">
link1
</div>
<div class="Link">
link2
</div>
</div>
</div>
and:
#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#4E6011;
position:relative;
}
#Navi {
width:100%;
position:absolute;
top:-1px;
left:-5px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
float:left;
background-color:#121212;
color:white;
text-decoration:none;
}
I just want to have:
- a complete header at the Top, which is #Top, convering the whole area at the top from left to right (width:100%).
- In the #Top header i want to display some Links done via #Navi. However i want to display #Navi in the bottom right corner of #Top. So i figured i would do #Top to position relative and #Navi position:absolute, but it doesnt work.
- Then i wanted the link color to be white, but somehow it doesnt work - why?
- Why do i need to use which i think is not cool? Without using the complete #Navi div wouldn't show up!
Thanks a lot!

Answer 1

try giving #Navi
bottom:0px and right:0px;

Answer 2

#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#4E6011;
position:relative;
}
#Navi {
width:100%;
position:absolute;
bottom: 0px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
background-color:#121212;
color:white;
text-decoration:none;
float: right;
}

Answer 3

not sure what are you trying, but here is a link: http://jsfiddle.net/4JdmH/
<div id="Top">
<div id="Navi">
<div class="Link">
link1
</div>
<div class="Link">
link2
</div>
<div class="clr"></div>
</div>
</div>
#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom: 2px solid #4E6011;
position:relative;
}
#Navi {
position:absolute;
bottom:0px;
right:0px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
float:left;
background-color:#121212;
color:white;
text-decoration:none;
}
.clr {
clear: both;
}