yussibaer: Div-Tag laesst sich nicht nach unten verschieben

Hi all,

mein Problem liegt darin, das ich ein div-tag auf Teufel komm raus nicht ganz unten im Browser darstellen kann. Hier der Codeauschnitt:

<BODY class="layout" leftMargin="0" topMargin="0">
  <DIV style="float:top; width:100%; height:0%;">
    <tiles:get name="headerSpacer"/>
  </DIV>

<DIV style="float:top; width:100%; height:50%;">

<DIV style="float:left; width:150px; height:100%;">
      <tiles:get name="menuLeft"/>
    </DIV>

<DIV style="float:left; width:0%; height:100%;">
      <tiles:get name="menuSpacer"/>
    </DIV>

<DIV style="float:left;  height:100%">

<DIV style="float:top; width:100%;">
        <tiles:get name="header"/>
      </DIV>

<DIV style="float:top; width:100%;">
        <tiles:get name="areaHeader"/>
      </DIV>

<DIV style="position: absolute; float:top; width:100%; ">
        <tiles:get name="body"/>
      </DIV>
    </DIV>
  </DIV>

<DIV style="float: bottom ; top: 0px ; bottom: 0px ;">
    <tiles:get name="footer"/>
  </DIV>

</BODY>

Speziell geht es um den folgenden Tag:
  <DIV style="float: bottom ; bottom: 0px ; left: 0px">
    <tiles:get name="footer"/>
  </DIV>

Wie der Name schon sagt, soll der footer stets am unteren Browserrand platziert werden. Durch die Befehle "bottom: 0px ; left: 0px" sollte der footer meiner Meinung nach dies auch tun, was leider nicht der Fall.

Jegliche Hilfestellung in dieser Problematik wird gerne entgegengenommen :)

Gruss

Yussibaer

  1. Hi,

    <DIV style="float:top; width:100%; height:0%;">

    float kennt den Wert top nicht. (Kommt mehrfach vor ...)

    <tiles:get name="headerSpacer"/>

    Welche Dokumentsprache verwendest Du? HTML kann es nicht sein mit diesem Element.
    (XHTML kann es auch nicht sein, dort gibt es kein DIV).

    <DIV style="float: bottom ; top: 0px ; bottom: 0px ;">

    bottom ist kein gültiger Wert für float.

    Die Eigenschaften top und bottom sind nur für positionierte Elemente anzuwenden.
    Du positionierst das Element nicht.

    Speziell geht es um den folgenden Tag:
      <DIV style="float: bottom ; bottom: 0px ; left: 0px">
        <tiles:get name="footer"/>
      </DIV>

    Da folgen 3 Tags, welches meinst Du? Oder meinst Du doch ein Element?
    Dieses DIV-Element taucht so im obigen Code gar nicht auf ...
    Für die Eigenschaft left gilt dasselbe wie für top und bottom - ohne Positionierung ist sie wirkungslos.

    Aber selbst wenn es eine absolute/fixe Positionierung gäbe - dann würde sich bottom am unteren Rand des body-Elements ausrichten. Ohne explizite (Mindest-)Höhenangabe ist der body aber nur so hoch wie sein Inhalt.

    Wie der Name schon sagt, soll der footer stets am unteren Browserrand platziert werden. Durch die Befehle "bottom: 0px ; left: 0px" sollte der footer meiner Meinung nach dies auch tun,

    Nein, darf er so nicht. S.o.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi Andreas,
      zunaechst mal vielen Dank, dass Du Dir die Muehe gemacht hast, mir zu antworten. Hier meine Gegenantwort:

      Hi,

      <DIV style="float:top; width:100%; height:0%;">

      float kennt den Wert top nicht. (Kommt mehrfach vor ...)

      <tiles:get name="headerSpacer"/>

      Welche Dokumentsprache verwendest Du? HTML kann es nicht sein mit diesem Element.
      (XHTML kann es auch nicht sein, dort gibt es kein DIV).

      jsp

      <DIV style="float: bottom ; top: 0px ; bottom: 0px ;">

      bottom ist kein gültiger Wert für float.

      Die Eigenschaften top und bottom sind nur für positionierte Elemente anzuwenden.
      Du positionierst das Element nicht.

      Speziell geht es um den folgenden Tag:
        <DIV style="float: bottom ; bottom: 0px ; left: 0px">
          <tiles:get name="footer"/>
        </DIV>

      Da folgen 3 Tags, welches meinst Du? Oder meinst Du doch ein Element?

      Sorry, ich meinte natuerlich die drei folgenden Tags.

      Dieses DIV-Element taucht so im obigen Code gar nicht auf ...
      Für die Eigenschaft left gilt dasselbe wie für top und bottom - ohne Positionierung ist sie wirkungslos.

      Aber selbst wenn es eine absolute/fixe Positionierung gäbe - dann würde sich bottom am unteren Rand des body-Elements ausrichten. Ohne explizite (Mindest-)Höhenangabe ist der body aber nur so hoch wie sein Inhalt.

      Wie der Name schon sagt, soll der footer stets am unteren Browserrand platziert werden. Durch die Befehle "bottom: 0px ; left: 0px" sollte der footer meiner Meinung nach dies auch tun,

      Nein, darf er so nicht. S.o.

      Das merkwuerdige an der ganzen Sache ist, dass wenn ich im Statement
      <DIV style="position: absolute; float:top; width:100%; ">
              <tiles:get name="body"/>
      </DIV>
      das 'position: absolute' rausnehme, dann funzt das mit dem footer wunderbar.

      cu,
      Andreas

  2. Hallo Yussibaer,

    Du kommst schonmal weiter wenn Du dich ein wenig mit Selfhatml und den Featureartikeln bzw. Tipps und Tricks beschäftigst.

    Dort ist z.B. ein Artikel über einen Footer.
    http://aktuell.de.selfhtml.org/tippstricks/css/footer/index.htm

    Ansonsten habe ich von float: top oder float: bottom noch nic was gehört.

    Auch hier soll ja lesen bilden, schau Dir doch mal die Eigenschfaften von float an. Du scheinst Dich aber eher für position zu interessieren.

    Liebe Grüße,

    Bernd

    1. Hallo Yussibaer,

      Du kommst schonmal weiter wenn Du dich ein wenig mit Selfhatml und den Featureartikeln bzw. Tipps und Tricks beschäftigst.

      Dort ist z.B. ein Artikel über einen Footer.
      http://aktuell.de.selfhtml.org/tippstricks/css/footer/index.htm

      Ansonsten habe ich von float: top oder float: bottom noch nic was gehört.

      Auch hier soll ja lesen bilden, schau Dir doch mal die Eigenschfaften von float an. Du scheinst Dich aber eher für position zu interessieren.

      Liebe Grüße,

      Bernd

      Hallo Bernd,

      ich habe den Artikel http://aktuell.de.selfhtml.org/tippstricks/css/footer/index.htm intensiv studiert und musste leider feststellen, dass dies mir ueberhaupt nicht weitergeholfen hat. Das Problem bleibt bestehen.