Question

I have an image that is left aligned with a caption in WordPress (code is below). The <div> tags at the bottom are dynamically shown (only one shown at a time). When one does show, it juts out past the bottom of the image and therefore part of the text is to the right of the image and part gets wrapped all the way to the left, directly underneath the image. Is there a simple way to prevent it from wrapping to the left after the image without hardcoding the line breaks in?

Here’s a crude example (select option 1 or option 2 in the dropdown):

<div style="margin-top: -50px;">
<a href="LINK">
<img alt="alt" src="LINK" title="title" width="200" height="257"></a>
Click the image to view it full size
A bunch of random text.<br>
<br>
<form>
<select id="choices">
    <option value="none">Select an option...</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
</select>
</form>
<div id="option1" class="hide">Option 1 TEXT</div>
<div id="option2" class="hide">Option 2 TEXT</div>
<div id="option3" class="hide">Option 3 TEXT</div>
<div id="option4" class="hide">Option 4 TEXT</div>
<div id="option5" class="hide">Option 5 TEXT</div>
<div id="option6" class="hide">Option 6 TEXT</div>
<div id="option7" class="hide">Option 7 TEXT</div>

JSFIDDLE

Answer 1

As you already has the imgfloated left, and knows of it’s width, the easiest way is to wrap everything that you want indented in a div, and add a margin-left to that wrapper div.

Here’s an updated fiddler: http://jsfiddle.net/F7JzJ/1/