Layout: div.main, Artikel, Footer

Hallo Freunde

Ich hab mal ne kurze Frage bezüglich Layout und zwar habe das Problem, dass wenn ich einen längeren Artikel schreibe wird dieser zwar dargestellt, allerdings passt sich das div.main nicht der grösse resp. höhe des Artikels an.
Ich gehe schwer davon aus, dass aus diesem Grund mein footer sich immer direkt unterhalb des div.main positioniert und damit mitten im erwähnten Artikel steht.

Grundsätzlich möchte ich ja, dass sich das div.main der Höhe des dargestellten Artikels anpasst. Wie krieg ich das hin?

Code:

---

#main {
    width:700px;
    min-height:500px;
    padding:30px 35px 25px;
}

---

Code:

---

#footer {
    float:left;
    border-top:1px solid #b5b5b5;
    font:12px calibri,arial;
    color:#b5b5b5;
}

---

einen temporären Link zur Webseite:
http://web1109.login-6.loginserver.ch

Merci für die Hilfe

Gruss Nico

Ich habe mir mal beispielhaft die Seite Produkte -> Übversicht angeschaut.
Die Ursache für das Problem dort ist die absolute Positionierung der Tabelle

Code:

---

table {

position: absolute

---

Abgesehen davon, verwendet man Tabellen nur für tatsächlich tabelarischer Inhalte und nicht um eine bestimmte Form der Darstellung zu erhalten. Dazu gibt es diverse andere Möglichkeiten heutzutage und ein nicht responsives Design in der heutigen Zeit tut auch schon weh.

Hallo mlweb

Vielen Dank für deine rasche Auskunft...
In Bezug auf die verschiedenen anderen Möglichkeiten zur entsprechenden Darstellung... welche würdest denn du mir da empfehlen? Ich bin der Meinung, dass die Darstellung in Form der Tabelle sehr einfach ist und auch die Formatierung der Tabellenelemente dadurch immer schön ausgerichtet sind. Wenn du mir allerdings eine andere Art empfehlen könntest um einen solchen Inhalt darzustellen werde ich das mal versuchen.

Merci

Nun ja - wenn Du heutzutage für Layout noch auf Tabellen setzt, dann hast Du m.E. einiges verschlafen. Mein ganz entscheidendes Stichwort für ein NOGO ist Semantik.
Möglichkeiten so etwas anders zu machen sind:

• float am einfachsten in Kombination mit einem der unterschiedlichsten grid-Systeme
• Flexbox, moderner und in Deinem Fall sehr gut geeignet und auch mit sehr guter Browserunterstützung (um die 97%)
• css-grid, noch moderner und mindestens ebenso gut geeignet, sollte man aber derzeit noch nicht ohne Fallback einsetzen (Browserunterstützung derzeit in Deutschland ca. 67%, Tendenz rasant steigend), als Fallback eignen sich z.B. Flexbox, float eventuell auch javascript-Lösungen (habe ich aber noch nicht explizit danach gesucht)