Trying to float an image to the right side of a paragraph is proving to be more challenging than anticipated.
100px
+-------------------------+ +------------+
| | | |
| | | |
| text | | img |100px
| | | |
| | | |
+-------------------------+ +------------+
<div>
<p>Some text...</p>
<img src="url" />
</div>
I want the text to respond when the viewport changes, as currently the image wraps when the window size decreases.
+--------------------------+ +
| | |
| text | |
| | |
+--------------------------+ |
+----------+ |
| | |
| img | |
| | |
| | |
+----------+ |
v
The desired layout should look like this:
+--------------+ +----------+ +
| | | | |
| | | img | |
| | | | |
| text | | | |
| | +----------+ |
| | |
| | |
+--------------+ |
|
|
|
v
Avoiding the use of position:absolute for the image is preferred. Are there any alternative methods?