Verhindern der Überlappung von divs

Question

Wie kann ich in der folgenden (https://jsfiddle.net/9cc2xvbs/) verhindern, dass sich Text überlappt oder den Textinhalt umschließt.

Stil

div.relative { 
    position: relative; 
    width: 400px; 
    height: 200px; 
    border: 3px solid #73AD21; 
} 

div.absolute { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 200px; 
    height: 100px; 
    border: 3px solid #73AD21; 
} 

Körper:

<div class="relative"><p>This div element has position: relative;<p> 
    <div class="absolute"><p>This div element has position: absolute;<p></div> 
</div> 

Answer 1

Es scheint, dass du vielleicht div in einem div mit dem grünen inneren div über auf der rechten Seite und der Text haben wollen herumwickeln?

.relative { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 200px; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
.absolute2 { 
 
    width: 190px; 
 
    display: inline-block; 
 
    height: 100px; 
 
    border: 3px solid #73AD21; 
 
} 
 
.absolute1 { 
 
    width: 50%; 
 
    display: inline-block; 
 
    height: 100px; 
 
}

<div class="relative"> 
 
    <div class="absolute1"> 
 
    <p>This is some text that should wrap around the second div as there are now two DIVs in the parent div</p> 
 
    </div> 
 
    <div class="absolute2"> 
 
    <p>This is some text that should wrap around the second div as there are now two DIVs in the parent div</p> 
 
    </div> 
 
    </div>

Answer 2

diese

div.relative { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 200px; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
div.absolute { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 100px; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
.first{ 
 
    width:50%; 
 
    display:inline-block; 
 
}

<div class="relative"> 
 
    <p class="first"> 
 
    This div element has position: relative; 
 
    <p> 
 
    <div class="absolute"> 
 
    <p>This div element has position: absolute; 
 
    <p> 
 
    </div> 
 
</div>

Answer 3

Die clasic Antwort Versuchen wäre ein Schwimmer zu verwenden. Gibt es einen Grund, die Position zu verwenden: absolut?

Sie benötigen außerdem oben die Reihenfolge des Elements ändern und die innerHTML-:

div.relative { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 200px; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
div.absolute { 
 
    float: right; 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 3px solid #73AD21; 
 
}

<div class="relative"> 
 
    <div class="absolute"><p>This div element is floated right<p></div> 
 
    <p>This div element has position: relative;<p> 
 
</div>