auto height ne deluje · Internet Mojster

20974234

31. dec 2009 ob 14:58

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

678

spletne strani html css