Div welches im Quelltext oben ist nach unten bringen

T

Templorials

Erfahrenes Mitglied
Hallo!

Gibt es eine schöne Möglichkeit beim folgendem Quelltext:

HTML: 
...
<div id="footer">variabler Text -> variable Höhe</div>
<div id="content">variabler Text -> variable Höhe</div>
...

Das footer unter content angezeigt wird? Wenn die Höhen fix wären könnte man das z.B. mit absoluten Positionieren machen. Aber die Höhe der divs ist je nach Inhalt.

Danke


UPDATE:
Habe gerade durch diverse Versuche eine Lösung gefunden, welche im aktuellen FF und Chrome funktioniert. Mich würde interessieren ob diese Lösung auch im IE (7/8) funktioniert.

HTML: 
<div style="position:relative">
	<div style="position:absolute;top:100%">
		<h1>Footer</h1>
		<p>Absatz1</p>
		<p>Absatz2</p>
	</div>
	<div>
		<h1>Content</h1>
		<p>Absatz1</p>
		<p>Absatz2</p>
	</div>
</div>

Knackpunkt ist wohl das 100% ob es durch das relative auch im IE von parent-div genommen wird oder 100% von der Seite. Bei FF und Chrome klappt das so wie gesagt.

UPDATE:
Habe einen IE6 gefunden. Dort funktioniert der obige Code so nicht ganz. Jedoch wenn ich dem container-div eine Breite geben gehts :-D ... Da das später der Fall ist stört mich das nicht weiter.
 
Zuletzt bearbeitet:
Hallo,

bei mir würde das so in allen gängigen Browsern (auch IE6) funktionieren:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test: Absolute Positionierung</title>
    <style type="text/css">
      * {
        margin: 0;
        border: 0;
        padding: 0;
      }
      body {
      	height: auto;	/* andere Werte erzeugen andere Darstellung im IE6 */
      	background-color: #eee;
      }
      #wrapper {
        position: relative;
        margin: auto;
        background-color: #fcf;
      }
      #footer {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #cff;
      }
      #content {
        background-color: #ffc;
      }
      .innerWrapper {
      	margin: 0;	/* andere Werte erzeugen andere Darstellung im IE6 */
      	border: 1px solid red;
        padding: 1em;
      }
    </style>
  </head>
  <body>

<div id="wrapper">

  <div id="footer">
    <div class="innerWrapper">
      <h1>Footer</h1>
      <p>Absatz1</p>
      <p>Absatz2</p>
    </div>
  </div>

  <div id="content">
    <div class="innerWrapper">
      <h1>Content</h1>
      <p>Absatz1</p>
      <p>Absatz2</p>
    </div>
  </div>

</div>

  </body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück