Also irgendwie klappt das so nicht.
Das zweite div will ums verecken nicht nach unten rutschen.
Noch mal zur verdeutlichung:

Das ganze soll ungefähr so aussehen:
http://de.selfhtml.org/css/eigenscha...eige/clear.htm

Wobei der rote Kasten in meinem Fall ein Bild ist.
Außerdem soll der Schriftzug "Dann kommen wir..." eben unterhalb
von "In diesem Kapitel.." stehen.
So wie in dem Beispiel sieht es bei mir momentan auch aus.
Nur stimmt das eben noch nicht ganz..

1100 0101

Code:

    <div style="float:left; background-color:#FF0000; width:100px; height:100px;">
    <!-- bild! //-->
    Bild
    </div>
    
    <div>
    <!-- überschrift! //-->
    <h1>In diesem Kapitel..</h1>
    </div> 
    
    <div>
    <!-- text! //-->
    Hier der Text.. =)
    </div>

So?

Dexter

Ist doch untereinander? Verstehe Dein Problem nicht ganz. Solltest Du Probleme haben grössere Textmengen da unterzubringen, dann rücke es mit margin ein.

Systemlord

Hi!

Das Beispiel von 1100 0101 funktioniert.
Mein Problem ist, ich habe nochmal ein div außenrum. (Siehe Beispiel)
Ich dachte eigentlich, daß sich die darin enthaltenen divs relativ dazu orientieren
würden. Das ist aber anscheinend nicht der Fall.
Zusätzliche Breitenangaben bringen im IE was, im FF jedoch nicht.

Hier mal das komplette Beispiel: (Vielleicht steh ich auch total auf'm Schlauch

)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<style type="text/css">
	body {
	margin: 0 auto;
	padding: 0;
	vertical-align: top;
	font: 100.01% Verdana, Arial, Helvetica, sans-serif;
	background: #FBFBFB;
}
 </style>
<head>
<body>
<div style="height:93px; background: url(bla.gif) repeat-x;">
<div style="float:left;border:1px solid blue;width:120px;height:200px;"><img src="blabla.gif" alt="" /></div>
<div style="border:1px solid blue;width:300px;"><h1>retzreterter</h1></div>
<div style="border:1px solid blue;float:left;">ertertert</div>
</div>
</body>
</html>

1100 0101

Ja, weil Die Schrift von <h1> breiter ist als die von Dir angegebenen 300px. Deswegen verschiebt sich das gefloatete nach unten.

Das folgende stimmte so übrigends nicht, da musst du das float:left weglassen:

Code:

<div style="border:1px solid blue;float:left;">ertertert</div>

Außerdem: Warum legst du für den bereich erst eine Höhe von 93px fest, um in den darin enthaltenen divs dann neue Höhenangaben zu definieren?

Systemlord

Hallo!

Danke, klappt jetzt.
Ich muß mich da wohl noch ein bißchen mit beschäftigen..

1100 0101

Gerne lege ich Dir http://www.css4you.de als Referenz und kleines HOWTO ans virtuelle Herz.

Anzeige

Anmelden

Weitere Tipps