Hallo!
Ich habe ein kleines Problem.

Ich weiß was ich falsch gemacht habe , und wo der Fehler liegt, nur nicht, wie ich ihn richtig behebe.

Der Fehler ist beim clearen/floaten.

Ich habe den passenden Auszug aus HTML Seite:

die passenden teile der CSS Datei:

Was dabei rauskommt ist folgendes:

Ein Container der rechts positioniert ist, in dem zwei andere sind.
Doch der obere ist nur so groß wie der Text darin, der sich rechts neben dem Bild befindet. Das Bild lappt über den nächsten Container , anstatt das der erste vergrößert wird.

Wie cleare/floate ich jetzt richtig, damit das Bild den Container nur vergrößert, und nicht überlappt?

Und noch eine kleine Frage am Rande:
Wieso sehe ich immer ein Scrollbalken auf der Website wenn ich in dem Container "text" die Breite auf 100% einstelle?

Ich bin ein Neuling in CSS (kann man villeicht auch am Quellcode sehen), und mache eigentlich mehr php, usw und weniger Design )

Danke schonmal,
Sonny

Jein, nicht ganz. Aber eins nach dem anderen.

Zunächst solltest Dir gleich von Anfang an angewöhnen sauberes HTML zu schreiben. <font> alleine (wie unten) ist überhaupt nicht sinnvoll, und nur für eine Klasse auch nicht besser. Wenn Du ein "beliebiges" Element verwenden willst gibt es <span> für Inline-Elemente, bzw <div> für Block-Elemente und eine Überschrift ist in der Regel ein Block-Element. Aber auch diese "bedeutungslosen" Elemente sind hier nicht richtig, denn für Überschriften gibt es extra <h1>, <h2>, etc. Da das deine "Hauptüberschrift" ist, wäre hier also <h1> richtig.

Versuche grundsätzlich "bedeutungsvolle" Elemente zu verwenden, die zu deiner Absicht passen: <hx> für Überschriften, <p> für Text-Absätze, <ul> für Listen, etc.

Hier ist die Quelle deines Problems, und es hat nichts mit CSS zu tun, sondern mit "einfachem", transitional HTML zu tun: align="left" hat - bei Bildern (!) - in HTML die selbe Bedeutung von float: left in CSS.

Erste Abhilfe: Nicht transsitional sondern strictes HTML verwenden, und regelmässig validieren, um nicht doch ausversehen transitional zu verwenden. Also das align (und das border) mit CSS ersetzen.

Siehe oben, Hier gehört <p> hin.

An der merkierten Stelle gehört das clearende Element hin. Wenn kein CSS eingesetzt werden würde wäre das <br clear="all">, aber mit CSS ein (leeres) <div> mit clear: left.

Oder du verwendest die "clearfix"-Methode wie im FAQ beschrieben auf die <div class="text"> an, dann wird kein zusätzliches Element benötigt.

Noch weitere Anmerkungen:

Diese Float hat mit deinem Problem also nichts zu tun.

vertical-align bringt hier nichts. Das ist nur bei Tabellenzellen oder Bildern eine Bedeutung.

Lies Dir mal was zum Thema "CSS-Box-Model" durch. Bei CSS steht "width" für die Breite des Inhaltsbereiches. Die eigentliche Breite ergibt sich aus width+padding+border+margin, was in deinem Fall mehr als 100% ist (da width ja bereits 100% ist).

Eine Anmerkung zu "width: 100%": Da Block-Elemente (in der Regel) automatisch die gesammt zu Verfügung stehene Breite ausfüllen, ist "width: 100%" meiner Erfahrung nach selten oder überhaupt nicht nötig.

IMHO hat HTML/CSS-Schreiben wenig bis gar nichts mit "designen" zu tun. Es ist viel näher an Programmieren.

Robin

Wow! Vielen Dank für diese sehr gute Hilfe Ich werde es gleich mal ausprobieren, bin mir sicher, dass es klappen wird


PS:
Im Prinzip weiß ich das, nur das was bei rum kommt ist halt ein Design und kein "Programm" Das meinte ich damit