Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 24.01.2009, 23:01
henmey henmey ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2009
Beiträge: 3
henmey befindet sich auf einem aufstrebenden Ast
Standard Bilder im div mit float positionieren

Hallo zusammen!

Ich möchte zwei divs mit float nebeneinander positionieren (Navi und Main), was auch problemlos funktionier. Weiter möchte ich im div Main meine Bilder auf der rechten Seite positionieren und der Text soll links am Bild vorbei fließen. Bis hier ist auch noch alles ok.
Der Text der zum Folgenden Bild gehört, soll aber erst auf Höhe des entsprechenden Bildes beginnen, auch wenn neben dem vorausgegangenem noch Platz ist. Und hier liegt das Problem. Wenn ich die Bilder mit "float: right;" positioniere, wird der Platz links neben dem Bild immer erst komplett aufgefüllt.
Wenn ich nach dem Text für z.B. das Erste Bild einen leeren Absatz mit <p style="clear:both;"></p>" einfüge, um mit dem nächsten Absatz unter Bild1 und neben Bild2 zu beginnen, rutscht das nächste Bild und der zugehörige Text ganz nach unten unter div Main.
Was mache ich falsch?
Gibt es eine andere Möglichkeit für das Problem?

Hier der Link zum Problem:
Testpage

Danke schon mal im Voraus!

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Testpage</title>
<style type="text/css">

div#nav_links {
  BACKGROUND-COLOR: #FF99FF;
  HEIGHT: 500px;
  width: 50px;
	float: left;
}

div#main {
  BACKGROUND-COLOR: #FFFFCC;
  HEIGHT: 500px;
  width: 600px;
}

div#main img {
 float: right;
}

#defloat {
	clear: both;
}

</style>
</head>

<body>
  <div id="nav_links"></div>
   <div id="main">
     <p><img src="Beispiel.jpg" width="325" height="240" Border="2" alt="Bild1"></p>
     <p>test1</p>
     <p>fbrjhebf wefjhbfw wjhfb fejhwbf wefwfewef wefwfe efwtg erg eeqrgqerg erger </p>
     <div id="defloat"></div>

     <p><img src="Beispiel.jpg" width="325" height="240" Border="2" alt="Bild2"></p>
     <p>test2</p>
     <p>fbrjhebf wefjhbfw wjhfb fejhwbf wefwfewef wefwfe efwtg erg eeqrgqerg erge </p>
  </div>
</body>
</html>

Geändert von henmey (25.01.2009 um 01:14 Uhr)
Mit Zitat antworten
Sponsored Links