✔ Layout ohne Tabelle möglich?

Status
Nicht offen für weitere Antworten.
MasterEvil

MasterEvil

Erfahrenes Mitglied
Hallo ich benötige folgendes Layout und es soll ganz ohne Tabelle auskommen:

Layout - Skizze

Ich habe schon einiges probiert aber ich bekomme es nicht hin.
Den Head am Anfang und den Footer ans Ende zu bekommen ist kein Problem.
Probleme machen nur die Rahmen links und rechts, denn wenn der Inhalt leer ist möchte ich dass der Footer trotzdem am unteren Bildschirmrand erscheint und die Rahmen bis zu diesem runter gehen.

Hier seht ihr mal mein Projekt: http://ordens-ritter.com/new/

Wenn ich den Footer unten positioniere bekomm ich nicht den Content gestreched :/
Vieleicht hat ja jemand eine Idee wie man sowas realisieren könnte?
 
Ja das kenne ich, das geht aber nicht weil dort der Content einfach nur so groß ist wie der Inhalt. Das fällt nicht auf wenn man keinen Rahmen hat oder Hintergrundfarbe etc. hat.

Mein Problem ist aber das ich zwei unterschiedliche Container links und rechts soweit in die Höhe maximieren muss das sie mindestens den Raum zwischen Header und Footer füllen.

Hier mal ein Beispiel wie das ganze mit einer Tabelle aussähen würde: http://ordens-ritter.com/new/beispiel.htm

[EDIT]
Doch ein anderes Beispiel als ich erst dachte aber dort ist genau der selbe Fehler den ich im Moment auch habe, es geht nicht bis untersten Punkt vom Fenster.
 
Zuletzt bearbeitet:
Und wie soll sich der Footer verhalten, wenn der Inhalt länger (=höher) ist, als der vertikale Viewport: fixiert oder mitwandern?
 
@ son gohan: der Footer soll bei zunehmenden Inhalt mitwandern, was bei einer absoluten Positionsangabe nicht möglich ist.
 
Hier mal ein simples Beispiel:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#content {
position: relative;
min-height: 100%;
}

* html #content { /* Für IE */
height: 100%;
}

#head {
height: 100px;
background: #efefef;
}

#footer {
position: relative;
height: 30px;
margin-top: -30px;
background: #efefef;
}
-->
</style>

</head>
<body>

<div id="content">
     <div id="head">head</div>
     content with dummy text
</div>
<div id="footer">footer</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück