✔ Problem mit float und clear .. stehe auf dem Schlauch

Status
Nicht offen für weitere Antworten.
D

deostift

Erfahrenes Mitglied
Hallo zusammen,

habe im Moment ein Problem bei dem ich nicht sorecht weiss wie ich es angehen soll. Ich hab weiter unten den Quellcode, aber hier ein paar Sätze.

Zu aller erst: Das Problem tritt nicht im IE auf ... Testet mal mit Firefox oder Opera

Ich möchte in zwei Containern nebeneinander links die Navigation darstellen (mit float:left) und in den rechten Container eben den Seiteninhalt.

Setze ich nun in den rechten Inhaltsbereich ein Bild mit ebenfalls der Eigenschaft float:left umfließt der nachfolgende Text wie gewünscht das Bild. Ist das Bild allerdings sehr hoch und ich will im gleichen Container eine Unterüberschrift setzen, umfließt diese ebenfalls das Bild (wegen float:left).

Dies möchte ich allerdings nicht. Die Unterüberschrift soll unter dem Bild anfangen. Also füge ich ein clear:left davor ein, was aber mit auch den float bei der Navigation löscht :(

Kommt sicher unverständlich rüber deswegen hier der Quellcode:

Code: 
<html>
<head></head>
<body>
<div id="aussen" style="width:700px;">
	<div id="navigation" style="float:left; width:200px; height:300px; background-color:silver;">Navigation<br />Navigation</div>
	<div id="content" style="margin-left:210px; height:500px; background-color:grey;">
		<img style="float:left;" src="" alt="Testbild" width="120px" height="170px"><p>Content Content Content Content Content Content Content</p>
		<h1>Newsübersicht</h1>
		<ul><li>News 1</li><li>News 2</li><li>News 3</li><li>News 4</li></ul>
	</div>
</div>
</body>
</html>

So obenstehend haben wir das Problem das die H1 Überschrift ebenfalls umfließt. Mach ich nun ein clear rein schaut das Ganze wie folgt aus:

Code: 
<html>
<head></head>
<body>
<div id="aussen" style="width:700px;">
	<div id="navigation" style="float:left; width:200px; height:300px; background-color:silver;">Navigation<br />Navigation</div>
	<div id="content" style="margin-left:210px; height:500px; background-color:grey;">
		<img style="float:left;" src="" alt="Testbild" width="120px" height="170px"><p>Content Content Content Content Content Content Content</p>
		<br style="clear:both;" />
		<h1>Newsübersicht</h1>
		<ul><li>News 1</li><li>News 2</li><li>News 3</li><li>News 4</li></ul>
	</div>
</div>
</body>
</html>

Problem ist nun dass die H1 auf der Höhe beginnt, an der der Navigationscontainer endet :(

Wovon ich träume ist eben, dass nur das float:left des Bildes gelöscht wird und die H1 direkt darunter anfängt ....


Weiß jemand Rat? Danke Euch schon jetzt .... Micha
 
Zuletzt bearbeitet:
Ich habe mal die Reihenfolge der floatenden Boxen umgestellt, damit die rechte von der linken umflossen wird:

HTML: 
<html>
<head>

</head>
<body>
<div id="aussen" style="width:700px">
        <div id="content" style="float:right; width:490px; height:500px; background-color:gray;">
                <img style="float:left;" src="" alt="Testbild" width="120" height="170"><p>Content Content Content Content Content Content Content</p>
                <h1 style="clear:left;">Newsübersicht</h1>
                <ul><li>News 1</li><li>News 2</li><li>News 3</li><li>News 4</li></ul>
        </div>
        <div id="navigation" style="margin-right:210px; width:200px; height:300px; background-color:silver;">Navigation<br />Navigation</div>
        <div style="clear:right;"></div>
</div>

</body>
</html>
Und noch zwei Tipps:

  1. In den HTML-Attributen width/height wird keine Einheit (px) angegeben.
  2. Der Name für die graue Hintergrundfarbe lautet gray und nicht grey.
 
Hi,

alternativ kannst Du auch den content mit float: left auszeichnen. Zusätzlich müssten der linke
Aussenabstand und die Breite geändert werden.
Code: 
<html>
<head></head>
<body>
<div id="aussen" style="width:700px;">
	<div id="navigation" style="float:left; width:200px; height:300px; background-color:silver;">Navigation<br />Navigation</div>
	<div id="content" style="float: left; margin-left:10px; width: 490px; height:500px; background-color:gray;">
		<img style="float:left;" src="" alt="Testbild" width="120px" height="170px"><p>Content Content Content Content Content Content Content</p>
		<br style="clear:both;" />
		<h1>Newsübersicht</h1>
		<ul><li>News 1</li><li>News 2</li><li>News 3</li><li>News 4</li></ul>
	</div>
</div>
</body>
</html>
Ciao
Quaese
 
Danke Euch beiden,

der Tipp von Quaese müsste passen - Problem ist wenn ich den Content mit float:right auszeichne und ein Redakteur ein Bild rechts einbauen will, tritt wohl das gleich Prob auf ... werde aber den Tipp von Quaese versuchen. Danke auch für die Korrektur meines Codes @ michaelsinterface :) *peinlich*

Viele Grüße, Micha
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück