DIV - Breite nicht 100% (obwohl default)

[Bizzi]

Halli Hallo.

Ich habe ein riesen Problem auf 3 Seiten.
In den Layouts sind mehrere Div-tags, die generell standartmäßig eine breite von 100% haben (sich also über den ganzen Browser ziehen).

Was mir aber nun nach Monaten aufgefallen ist:
Wenn der Browser von der Breite verkleinert wird, ist dementsprechend der DIV keine 100% mehr sondern weniger.

Habe dieses mal als Video aufgezeichnet:
Testing - Kostenlose hochqualitative Videospeicherung - Upload and share your videos


Bei folgenden Websites ist dies der gleiche Fall:
Firma Robert David - Dienstleister fr Bestatter
Beerdigungsinstitut Michael Claßen - Beerdigungen mit Herz
NSV Film - Medienproduktion & Anlagenverleih

Was ich bereits (ohne erfolg) versucht habe:
In der CSS "html" sowie "body" und den jeweiligen DIV als "width: 100%;" gesezt.
Funktioniert anscheinend aber nicht.

Kann mir jemand helfen, wie ich das Problem (auch zukünftig) beheben kann?

 

[aJunkie]

Ich habe mir die CSS Dateien nicht alle angeschaut, weil es zu viele sind.
Ich würde die auf nur wenige reduzieren, was die Anzahl der Requests auch verringern würde.

Also deine Seite ist 100% breit. Du meinst wohl, dass sich die Seite ab einer gewissen Breite nicht weiter verkleinern lässt?

Irgendwo ist da wahrscheinlich ein "min-width", was sagt, dass die Seite mindestens xx groß sein soll und auf keinen Fall kleiner.

PS: Wenn ich mir alle Websites anschaue und den Browser verkleiner, sieht es doch ganz okay aus, quasi so, wie ich es auch gerne hätte.

 

[Bizzi]

Zu der CSS struktur:
Ja für leute, die die Struktur nicht kennen, sehen dies als Wirr-Warr an - Hat aber seine vor und Nachteile.

Die CSS Dateien sind folgendermaßen gestored:
Template -> CSS Ordner -> Betriebssystem (Win/Mac) -> Browser (Firefox, IE7/IE8/IE9, Opera, Safari,....)
Dort drin enthalten ist einmal die style.css (für das eigendliche Design) und ein ordner "sites" mit den einzelnen CSS-Files für die einzelnen Seiten.

Vorteile:
Die Seite kann für jeden Browser angepasst werden

Nachteile:
Mühsehlige Arbeit.

Nun zum Hauptproblem:
Nein ich habe bereits geschaut gehabt - es gibt keine min-width angaben, die zum Layout gehören.

Die Seite ist 100% breit, genau.
Sobald man das Fenster aber von der Breite verkleinert (unter 1.000 px) so werden die DIV-Tags nicht mehr auf 100% gezogen, sondern werden proportinal kleiner (keine ahnung warum).

 

[prm]

Die Seite hat zwar keine min-width.
Aber dadurch, dass die einzelnen Inhaltsblöcke eine fixe Breite haben, ergibt sich somit insgesamt eine fixe Gesamtbreite.
Auch hier ist eine fixe Breite definiert:

#design #content .inline {
	width: 980px;
}

Auch ich finde das so in Ordnung.
Um wirklich ein flexibles Layout zu erhalten, müsstest du überall mit prozentualen Breiten arbeiten. Dann kommen noch Zwischenabstände für margin, padding oder border hinzu. und wenn du die per px definierst, dann kommst wieder auf keinen gemeinsamen Nenner mit den Prozenten.
Der Nachteil eines flexiblen Layouts liegt auch darin, dass je nach Bildschirmbreite die Proportionen zwischen prozentualen Breiten und fixen Grafiken leiden.

 

[Bizzi]

Hmm, scheint aber bei vielen das Problem zu sein.
Habe mal einige andere Web-Agenturen mir mal angeschaut - Selbst von Welchen die für Adobe arbeiten haben das selbe Problem.
Vielleicht haben diese des noch nicht realisiert.

Vielleicht ein Bug des Browsers?

Scheint ein Problem mit DIV's zu geben.
Generell wenn ein DIV verwendet wird, ohne eine breitenangabe, ist der div standartmäßig block sowie 100%.

 

[prm]

Das ist kein Bug, sondern regelgerechtes Verhalten.
Wenn keine Breite definiert ist, dann dehnt sich der Div auf die insgesamt verfügbare Breite aus.
Wenn nichts links und rechts vom Div ist, also auf 100%.

Die default-Einstellungen mit 100% beziehen sich auf html und body.
Wenn du ein komplett flüssiges Layout willst, dann musst du auch die Div-Breiten in Prozent angeben, so dass die insgesamt 100% ergeben. Nachteile siehe oben.