Zur Navigation

Float will nicht funktionieren

1 Imko

Hallo zusammen!
Ich möchte zwei Boxen auf der Seite positionieren und sie auf der recchten Seite mit Text umfließen lassen. Dafür habe ich den unten stehenden Code geschrieben. Sowohl Firefox wie auch der IE positionieren den Text aber unter den Boxen. Teste ich den Code jedoch im internen Browser meines Editors (Phase 5 und auch PSPad Editor) wird der Text wie gewünscht neben den Boxen angezeigt. Kann mir jemand erklären,woran das liegt?

Hier der Quelltext:

<head>
  <title>Positionierung</title>
</head>

<style type= text/css>
  .kasten {width: 300px;height:300px;background-color:yellow;float:left;}
</style>

<body>
<div style="position:absolute;top:80px; left:220px;">
   <div class="Kasten">Kasten1</div>

     <p>
     Dieser Text soll neben<br>
     dem Kasten erscheinen.
     </p>
</div>

<div style="position:absolute;top:120px; left:820px;">
   <div class ="kasten">Kasten2</div>

     <p>
     Dieser Text soll neben<br>
     dem Kasten erscheinen.
     </p>
</div>

Vielen Dank für eure Hilfe!

22.12.2012 22:38

2 Jörg Kruse

Maßgeblich für die Anzeige ist noch die Doctype-Angabe. Wenn diese nicht "strict" ist, haben die Browser Interpretationsspielraum

Das passt von der Groß- und Kleinschreibung nicht zusammen:

.kasten
<div class="Kasten">

Außerdem würde ich das style Element innerhalb des head Elements platzieren und nicht zwischen head und body.

Wenn die Elternbox absolut positioniert ist, benötigt auch sie noch eine Breitenangabe, damit der float eines Kindelementes funktioniert.

22.12.2012 23:35 | geändert: 22.12.2012 23:36

1 Forenmitglied fand diesen Beitrag gut

3 Imko

Zitat von Jörg
Maßgeblich für die Anzeige ist noch die Doctype-Angabe. Wenn diese nicht "strict" ist, haben die Browser Interpretationsspielraum

Das passt von der Groß- und Kleinschreibung nicht zusammen:

.kasten
<div class="Kasten">

Außerdem würde ich das style Element innerhalb des head Elements platzieren und nicht zwischen head und body.

Wenn die Elternbox absolut positioniert ist, benötigt auch sie noch eine Breitenangabe, damit der float eines Kindelementes funktioniert.

Hallo Jörg;

Die fehlende Breitenangabe in der Elternbox war es! Vielen Dank für die schnelle Hilfe, jetzt kann ich beruhigt Weihnachten feiern! ;-)

Gruß und schone Feiertage

Imko

23.12.2012 16:54

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]