Prevent "fragmentation" of wrapped text next to floated image - css

Question

I'm trying to get this text to not "fragment" on smaller resolutions. It's for an assignment, and I'm restricted to using XHTML.
The image to the right is floated like this:
#image {
width:420px;
margin-left: 2%;
height:370px;
position:relative;
float:right;
}
with the XHTML:
<div id="image">
<a href="http://en.wikipedia.org">
<img src="picture.png"/>
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Obviously this "fragmentation" doesn't appear on larger resolutions.
Is there an elegant way to this in CSS2.1?

Answer 1

Since the wrapping issue is resolution dependent, you can solve this pretty easily with CSS Media Queries. Think of these as a simple "if/else" for css.
So figure out the window width where the wrapping becomes unacceptable and create a max-width rule with that number. This means for width's less than your max size, the rule will apply.
Now at this size, simply remove the float and set the image to display block which will push the text down the page.
#media (max-width: 600px) {
#image {
display:block; // make image push text down
float: none; // remove your float
margin: 10px auto; // center the image in the available space
}
}
Note: With media queries should be at the BOTTOM of your CSS so they override the previous rule AND you only need to change the attributes that are overridden.

Answer 2

Nice solution #BryceHowitson.
I have just been grappling with this problem and came up with a variant on your approach. I put the Media query on the paragraph of text that followed the image.
My solution targets the clear property on the paragraph that follows the floated image. When the screen resolution leaves enough space beside the floated image for satisfactory rendering of the text, the paragraph wraps around the image. When the available width is too low for satisfactory rendering of the text, the paragraph has "clear:both" applied and the paragraph moves down below the floated image.
One 'pro' for this approach is that the CSS rule is applied to the element whose behavior we are trying to control.
However, what #BryceHowitson's solution achieves, and mine doesn't, is the centering of the image when the wrapping of the subsequent text is turned off.
CSS
.p-clear {
#media (min-width: 400px) {
clear: none;
}
#media (max-width: 400px) {
clear: both;
}
}
HTML
<img src="..." width="300px">
<p class="p-clear">text that needs at least 100px width</p>