DIV überschneiden sich

polarpro

Grünschnabel
Servus,
ich stolpere über folgende Sache:

Wie zu sehen ist (s. Datei im Anhang), ist in meinem Layout rechts oben ein fester Bereich, der umflossen wird von anderen Div-Blöcken. Das Problem ist, dass zwar der Text umfließt, jedoch nicht die grünen oberen und unteren Div-borders.
Kann mir jemand sagen, was ich falsch gemacht habe?
Danke :)

Hier noch der Code:
HTML:
<html>
<head>
<title>Div-Problem</title>
<style type="text/css">

  div#Cover {
    float: right;
    width: 250px;
    height: 350px;
    margin: 10px;
    padding: 10px;
    border: 3px solid orange;
  }

  div#Inhalt {
  	border-bottom: 1px solid blue;
  	border-top: 1px solid blue;
  	padding: 5px;
  }

</style>
</head>

<body>

<div id="Cover"></div>

<div id="Inhalt">Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext </div>
<div id="Inhalt">Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext</div>
<div id="Inhalt">Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext </div>
<div id="Inhalt">Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext</div>
<div id="Inhalt">Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext </div>
<div id="Inhalt">Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext</div>
<div id="Inhalt">Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext </div>
<div id="Inhalt">Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext  Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext</div>
<div id="Inhalt">Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext</div>
<div id="Inhalt">Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext Blindtext</div>

</body>
</html>
 

Anhänge

  • Div_Problem.jpg
    Div_Problem.jpg
    267,8 KB · Aufrufe: 15
...
Kann mir jemand sagen, was ich falsch gemacht habe?
Hallo,

du hast nichts falsch gemacht, das ist völlig normales Verhalten, dass die Blockelemente so breit bleiben. Normalerweise hat das kaum Konsequenzen, da das gefloatete Element selten transparent (wie in deinem Beispiel) ist.

edit:
Übrigens sehe ich gerade, dass in deinem Beispieldokument das ID-Attribut "Inhalt" mehrmals vorkommt. Das ist kein valides HTML.
 
Zuletzt bearbeitet:
du hast nichts falsch gemacht, das ist völlig normales Verhalten, dass die Blockelemente so breit bleiben. Normalerweise hat das kaum Konsequenzen, da das gefloatete Element selten transparent (wie in deinem Beispiel) ist.

Danke. Ich denke, dann muss ich mit margin-right o.dgl. mal ausführlich rumprobieren. Der gewünschte Effekt ist der, dass sich diverse Blockelement nacheinander um den orangefarbenen Kasten schmiegen.

Übrigens sehe ich gerade, dass in deinem Beispieldokument das ID-Attribut "Inhalt" mehrmals vorkommt. Das ist kein valides HTML.

Hoppla, stimmt, das ist mir im Eifer des Gefechtes passiert. Danke für den Hinweis.
 
Zurück