auto height ne deluje

Pozdrav!.. 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 -->

CSS

body { 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; }

Č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>

To je to, ja.. hvala ti!