css - How to make text NOT flow around image, and to make it fall under image responsively

Question

I want to have an image floated left, with text to the right that doesn't flow around it, and that falls underneath it when the browser is minimised. Like this:

This is the css I've got at the moment:

.item-container{ margin: 0 20px 20px 25px;  }

.directory {display: inline; overflow: auto;}

.directory-image {float: left; margin-right: 17px;clear: left;}

Answer 1

You could add a float:left to the .directory div and give it a width of a certain value.

.directory { 
    float:left; 
    width:300px;
}

Like so: http://jsfiddle.net/aMA65/

You could also add a width in percentage to .directory and .directory-image to make it more responsive. (Don't forget img { max-width:100%; height:auto; } )