Looking for the best way to position a ul in the lower left corner of a div?
I experimented with ul and came close, check it out: http://jsfiddle.net/dan_cron/jUef2/
If I replace the ul with a div, I can achieve the desired result. http://jsfiddle.net/dan_cron/jUef2/0/
- Why does the ul behave differently from the div?
- Is it possible to adjust the ul using only css?
- Any suggestions for placing a navigation bar in the lower left corner of a div?
html
<div class="big">
<ul class="middle_left">
<li>Small left</li>
</ul>
<div class="middle_right">
Big right
</div>
</div>
css
.big {
overflow: auto;
position: relative;
border: 1px solid;
}
.middle_left {
border: 1px solid;
position: absolute;
bottom: 0px;
}
.middle_right {
float: right;
border: 1px solid;
line-height: 48px;
}