Разделение на левую навигацию не будет расширяться с содержанием. Высота: автоматически не работает

Question

У меня есть левый угол навигации, который должен расширяться вертикально в зависимости от количества содержимого в теле страницы. Навигационный div (# left-nav) установлен на автоматическую высоту, но он будет расширяться только до размера списка внутри него. Если я устанавливаю фиксированную высоту, то отвечает градиент фона, но я не могу понять, почему высота: авто не работает.

Любая помощь была бы принята с благодарностью. Благодаря!

Вот код, используя только черный фон, чтобы избежать постороннего кода для градиента:

HTML:

<div id="content"> 
<div id="left-nav"> 
    <ul class="nav-list"> 
     <li><a class="class3" href="#">nav 1</a></li> 
     <li><a class="class3" href="#">nav 2</a></li> 
     <li><a class="class3" href="#">nav 3</a></li> 
     <li><a class="class3" href="#">nav 4</a></li>          
    </ul> 
</div> 

<div id="body-main"> 
    <p>content</p> 

    </div> 
</div> 

CSS:

.content {float:left; width:1000px;} 
#left-nav {background:#000000; float:left; height:auto; width:180px;} 
#left-nav li a {display: block; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-weight: normal; font-size: 15px; line-height: 17px; padding-left: 10px; padding-bottom:20px;} 
.nav-list {padding-top:25px; width:180px;} 
a.class3 {color:#ffffff; text-decoration:none; } 

Answer 1

Попробуйте это ...

.content {positon:relative;float:left; width:1000px;} 
#body-main {margin-left:200px;} 
#left-nav {position:absolute;top:0;left:0;bottom:0;width:180px;background:#000000;}