auto height ne deluje

#1Pozdrav!.. pri spravljanju dizajna v kodo sem prišel do problema. In sicer postavitev strani imam takole:
- header
- content
- footer

Vsebina content diva je dinamična torej se višina prilagaja glede na vsebino. Deluje vredu, dokler so v content osnovni tagi kot p, h1, span, kakorhitro pa dam not ul oz. dl pa mi auto height več ne deluje kot bi moral. Spodaj je koda, pa upam da sem dokaj jasno razložil kaj me muči, čene pa probajte s kodo je precej jasno prikazano za moje pojme.

HTML<div id="header">header</div><!-- end header -->
<div id="content">
<div id="articles">
<h1>Articles</h1>
<p>P test</p>
<span>SPAN test</span>
<h1>H1 test</h1>
<div>DIV test</div>
<dl>
<dt><a href="#">Zgoraj</a><span>spodaj</span></dt>
<dt><a href="#">Zgoraj</a><span>spodaj</span></dt>
<dt><a href="#">Zgoraj</a><span>spodaj</span></dt>
<dt><a href="#">Zgoraj</a><span>spodaj</span></dt>
<dt><a href="#">Zgoraj</a><span>spodaj</span></dt>
<dt><a href="#">Zgoraj</a><span>spodaj</span></dt>
</dl>
</div>
</div><!-- end content -->
<div id="footer">footer</div><!-- end footer -->
CSSbody { background: #ccc; margin: 246px 0 0 0; padding: 0; font: normal 12px arial, sans-serif; }

/* Header */
#header { background: #b40404; height: 71px; position: absolute; left: 50%; right: 0; margin-top: -71px; margin-left: -440px; }

/* Content */
#content { background: #191919; width: 840px; height: auto; margin: 0 auto; padding: 20px; }

/* Articles */
#articles dl { width: 840px; }
#articles dt { width: 420px; float: left; }
#articles dt span { display: block; }

/* Footer */
#footer { width: 100%; height: 150px; background: #fff; text-align: right; border-bottom: 3px solid #ebebd3; position: absolute; right: 50%; margin-right: -440px; }

#2Če dodaš pred zaključkom diva content še tole, bi verjetno rešlo težavo. Ne lubi se preverjat, pa nisem ziher.

<div style="clear:both"></div>

#3To je to, ja.. hvala ti!