Flexibles Layout - Inhalt schieben sich übereinander

[omega2k]

Unsere neue Internet-Präsenz unter http://consenso-gmbh.de hat jetzt in HTML und CSS Quellcode keine Fehler mehr und verzichtet auch komplett auf Tabellen. Das Problem ist jetzt nur, da das Design voll skalierbar sein soll wurden DIV Container verwendet, die sich jetzt leider ineinander verschieben lassen. Beispielsweise das Bild links auf der Startseite schiebt sich über den Text rechts, obwohl im CSS "display: block;" steht... wo liegt unser Fehler?

[sejuma]

Ein Fehler ist das nicht, sondern vielmehr das normal-korrekte Verhalten.
Da deine einzelnen "Spalten" eine relative/flexible Breite haben, passen sie sich der Bildschirmfenstergröße proportional an.
Die Grafik hat dagegen eine fixe Pixelbreite und benötigt eben diesen Platz, auch wenn der sie umfassende Div schmäler wird.

Genau das ist wohl auch der wesentliche Nachteil eines flexiblen Layouts.

Du könntest es lösen, indem du neben der prozentualen width-Angabe noch eine "min-width" hinterlegst, die der Grafikbreite entspricht. Benötigt aber für den IE 6 noch einen workaround, da dieser min- und max-width nicht kann.

[Zer0]

In der Regel verpasst man den Containern auch ein Minimum, was sie mindestens haben sollte. Mehr nachzulesen hier.

[omega2k]

In der Regel verpasst man den Containern auch ein Minimum, was sie mindestens haben sollte. Mehr nachzulesen hier.

Hab ich jetzt mal angepasst. Jetzt floatet der Text rechts einfach nach unten... wie kann ich denn ein 2-spaltiges Layout (ähnlich einer Tabelle) vernünftig umsetzen? Der Text wird jetzt jedenfalls nicht mehr unter das Bild geschoben, aber ich hab auch schon vergeblich versucht, dem Bild das beizubringen - was der Text davor gemacht hat (so in der Art, dass das Bild einfach beschnitten wird, wenn der Ausschnitt zu klein ist).

[wildmieze]

Du könntest overflow:hidden; ausprobieren, wenn das Bild "beschnitten" werden soll.

[sejuma]

Wenn die Grafik links gefloatet ist und der Text rechts daneben soll die Grafik nicht "unterwandern", dann musst du dem Text einen margin-left-Wert geben, der mindestens der Grafikbreite entspricht, siehe http://www.ohne-css.gehts-gar.net/0051.php
oder hier Ziffer 4: http://www.ohne-css.gehts-gar.net/0019.php