Layout zerschießt bei kleinem Browserfenster

[Mase]

Hallo,

ich habe ein Problem und bin bald am verzweifeln... Wenn ich im Browser meine Seite "normal" d.h. im Vollbild anschaue ist alles ok. Aber wenn ich das Browserfenster verkleinere, zerfetzt es mir das Layout...

Irgendwie hab ich die Vermutung, dass es damit zutun hat, weil gewisse divs wie Header, footer und Imagesilder auf width: 100% laufen. Aber auch wenn ich eine feste Breite definiere ändert das nichts. Jedenfalls fließt der Content aus dem Main div und der Footer ist nicht mehr 100% width. Bisschen blöd zu beschreiben, deshalb hier mal Screenshots:

"Großes Browserfenster" (alles ist OK)
normal.jpg

"Kleiners Browserfenster" (Alles zerschossen, footer nicht mehr 100%, der body "top" kommt am rechten Rand zum vorschein)
nicht normal.jpg


Hier auch nochmal der CSS Code

#top {
    background-color: #FFFFFF;
    background-image: url("../../files/website/gfx/bgtop.png");
    background-repeat: repeat;
}
html {
    height: 100%;
    margin: 0;
    overflow-y: scroll;
    padding: 0;
}
body {
    background-color: #ECECEC;
    font: 87.5% Verdana,Arial,Helvetica,sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper {
    background-color: #FAFAFA;
    background-repeat: repeat;
    height: auto !important;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
    width: auto;
}
#logo {
    height: 50px;
    margin-top: 5px;
    padding-bottom: 5px;
    width: 350px;
}
#header {
    background-image: url("../../files/website/gfx/headersmall.png");
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.65);
    height: 95px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 999;
}
#header h1 {
    color: #444444;
    font: bold 26px/1.7 "Droid Sans",sans-serif;
    margin: 0;
    padding: 0;
}
#header h2 {
    color: #444444;
    font: 1em "Droid Sans",sans-serif;
    margin: 0;
    padding: 0;
}
#header .inside {
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    width: 960px;
}
#container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    position: relative;
    top: 320px;
    width: 960px;
}
#main {
    color: #444444;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.7;
}
#main.inside {
    margin: 0 auto;
    width: 960px;
}
#main .ce_text {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}
#footer {
    background-image: url("../../files/website/gfx/footerbggreen.png");
    background-repeat: repeat-x;
    bottom: 0 !important;
    box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.65);
    color: #444444;
    font-size: 12px;
    font-weight: normal;
    height: 80px;
    width: 100%;
}
#footer .inside {
    width: 960px;
}
#footer p {
    margin: 0;
    padding: 0;

Hat jemand von Euch eine Idee, wo das Problem liegen kann?

Schon mal vielen Dank vorab.


Gruß
Mase

[kayyy]

Ohne Link kann man nur raten ...

[varix]

Guten Abend,

hier findest du sicher die Erklärung und eine Lösung(Punkt 6):CSS-Framework von Contao 3 – was hat sich geändert?

Grüße,
varix

[stefan-at-work]

Das ist kein Bug sondern eine Feature in Contao 3.0 -> Responsive Contao
siehe auch hierzu den Vortrag von Peter Müller auf dem Contao-Nordtag

Hier wirst Du dann also nicht herum kommen, Dich mit dem Holy Grail und dem neuen Layoutbuilder auseinanderzusetzen. Falls Du Deine Seite nicht responsive haben möchtest (also das alte Standardverhalten aus C2), dann kopiere Dir das entsprechende Template der fe_page und entferne die Zeile

<?php echo $this->viewport; ?>