Bobby: div mit "overllow auto" immer bis zum unteren Rand ausrichten

Beitrag lesen

Moin

Folgende funktioniert nur mit JS-Hack:

css:

html
{
    height:100%
}

html, body
{
    background: url("../images/hg_body.gif") repeat-x #FFF;
    width:100%;
    min-height:100%;
    margin:0px;
    padding:0px;
    font-family:Tahoma;
    font-size:11px;
    text-align:left;
    color:#333;
    position:relative;
    text-align:center;
    line-height:16px;
}

#container
{
    width:990px;
    margin:auto;
    height:100%;
    position:relative;
}

#top
{
     height:250px;
}

#content
{
    float:left;
    text-align:left;
    padding-left:20px;
    width:600px;
    padding-bottom:85px;
    height:auto;
    overflow:auto;
}

#right
{
    float:left;
    width:200px;
    padding-left:10px;
    padding-bottom:65px;
}

#footer
{
    background:#9bc937;
    height:66px;
    width:100%;
    position:absolute;
    bottom:0px;
    left:0px;
    text-align:center;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
     xml:lang="de" >
    <head>
    </head>
    <body>
        <div id="container">
            <div id="top">
            </div>
            <div id="content">
                 Hier der Inhalt
            </div>
            <div id="right">
            </div>
            <br class="clr"/>
        </div>
        <div id="footer">
        </div>
    </body>
</html>

Also wenn du mir sagst wie es ohne HAck bei diesem Beispiel funktioniert wäre ich sehr dankbar.

Gruß Bobby

--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)