I am having an issue where my image is overlaying the text. I would like the text to wrap around the image and for any hidden text to appear on a different line. How can this be achieved?
Here is the CSS code I am using:
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
overflow: hidden;
display: inline-block;
}
div.absolute {
position: absolute;
top: 20px;
right: -90px;
width: 200px;
display: inline-block;
border: 3px solid #73AD21;
}
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
overflow: hidden;
display: inline-block;
}
div.absolute {
position: absolute;
top: 20px;
right: -90px;
width: 200px;
display: inline-block;
border: 3px solid #73AD21;
}<div class="relative">This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element has position: relative;This div element
has position: relative; This div element has position: relative;
<div class="absolute">
<img src="http://localhost:20162/images/logo.png" />
</div>
</div>To see the problem in action, visit JS Fiddle.