The following examples and layouts use the 'overflow:hidden' feature to prevent text wrapping and to allow nice and neat listings whilst keeping them responsive. The examples all comprise of 2 columns. You can either choose to have trhe image on the right or left without issue.

Consider putting the clear both in the <h2> title rather thatn a seperate <div style="clear: both;">&nbsp;</div> - This makes it neater and one less line. Not having the <div> at the end also prevents the text getting cycled in <div>'s rather than <p>'s.

Single Paragraph Method

Minimum Code Required for overflow to work

HTML

<div style="overflow: hidden;">
	<img style="margin: 10px; float: right;" src="/images/pages/dog-sitting/arnside.jpg" alt="arnside" />
	<p style="overflow: hidden; min-width: 180px;">Your dog can stay with us at my home. They will be treated just like a member of our family with</p>
</div>

Single Paragaph - <br /> Clear Method

Item/Article list (ie rooms) image on the left, minimum width for the item to prevent content/text block  wrapping and splitting lines (responsive)

HTML

<div style="overflow: hidden;">
	<img style="margin: 10px; float: left;" src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" />
	<p style="overflow: hidden; min-width: 180px;">
		If you’re working full time hours we can call at lunchtime and treat your dog to over an hours’ worth of exercise and companionship to break up the day. If the mornings are hectic or your dog is young and just can’t wait then maybe our morning walk is for you. I walk in the afternoon too giving you real flexibility if you work shifts or have a busy afterschool schedule. Walkies works Mon to Fri but book only the days you need. Five days a week or five days a year, once you have registered I’m happy to take your dog even when it’s a last minute emergency. Weekends are by arrangement.<br style="clear: both;" />&nbsp;
	</p>
</div>

Single Paragaph - <div> Clear Method

Item/Article list (ie rooms) image on the left, minimum width for the item to prevent content/text block  wrapping and splitting lines (responsive)

HTML

<div style="overflow: hidden;">
	<img style="margin: 10px; float: left;" src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" />
	<p style="overflow: hidden; min-width: 180px;">
		If you’re working full time hours we can call at lunchtime and treat your dog to over an hours’ worth of exercise and companionship to break up the day. If the mornings are hectic or your dog is young and just can’t wait then maybe our morning walk is for you. I walk in the afternoon too giving you real flexibility if you work shifts or have a busy afterschool schedule. Walkies works Mon to Fri but book only the days you need. Five days a week or five days a year, once you have registered I’m happy to take your dog even when it’s a last minute emergency. Weekends are by arrangement.
	</p>
</div>
<div style="clear: both;">&nbsp;</div>

NB: <p style="overflow: hidden; min-width: 180px;"> can be replaced with <div style="overflow: hidden; min-width: 180px;">. This has the benefits of extra spacing that comes with <p> not being applied. However if you use <div>, text will also need to be encapsulated in a <p>. See the following methods.

More Complex DIV Methods

Single <div> Method

• This only allows for images or single items to be floated to the side
• In the 'text/content' <div> you can put anything you want

HTML

<div style="overflow: hidden;">

	<img alt="" src="/images/dog-picture.jpg" style="float:left; margin: 10px;"/>
	
	<div style="overflow: hidden; min-width: 180px;">
		<h2>This is a Title</h2>
		<p>This is a paragraph of Text</p>
		<ul class="list-number-digit digit-brown">
			<li>We are located in the heart of historic Branston on the main Lincoln Road.</li>
			<li>Just 10 minutes South East of Lincoln.</li>
			<li>We have a large selection of quality Guest Beers, Largers, Bitters, Spirits, Soft drinks and Snacks.</li>
			<li>We also have a long history of serving the community through a number of local and National Charities.</li>
			<li>If you have any questions please don't hesitate to call us.</li>
		</ul>
		<p>Another Paragraph of text (optional)</p>
	</div>

</div>

Double <div> Method

<li> and content with imageshow on the right, text area has mimimum width to prevent text wrapping (responsive)

• With this you can change the side on which the image floats
• It is also possible to put more in the floated <div> than an image, anything you want.
• In the 'text/content' <div> you can put anything you want
• this is the best method, the most flexible.

NB: in this example i set imageshow to 419px width   X   336px height, Theme Slider

HTML

<div style="overflow: hidden;">

	<div style="float: right; margin: 10px;">{imageshow sl=1 sc=1 /}</div>
	
	<div style="overflow: hidden; min-width: 180px;">
		<h2>This is a Title</h2>
		<p>This is a paragraph of Text</p>
		<ul class="list-number-digit digit-brown">
			<li>We are located in the heart of historic Branston on the main Lincoln Road.</li>
			<li>Just 10 minutes South East of Lincoln.</li>
			<li>We have a large selection of quality Guest Beers, Largers, Bitters, Spirits, Soft drinks and Snacks.</li>
			<li>We also have a long history of serving the community through a number of local and National Charities.</li>
			<li>If you have any questions please don't hesitate to call us.</li>
		</ul>
		<p>Another Paragraph of text (optional)</p>
	</div>

</div>

Unsorted Examples

Item/Article list (ie rooms) image on the left

Minimum width for the item to prevent title wrapping and splitting lines (responsive)

http://www.inchrye.co.uk/rooms

HTML

<p>Our Rooms at Inchrye Bed and Breakfast are all well maintained but retain a homely feel so you can enjoy your stay in Inverness like it was your own back garden. We have a wide variety of room sizes to suite all family sizes.</p>
<p><img alt="Suite Room with Double Bed and own Sitting Room" class="frame-2" src="/images/rooms/suite-room.jpg" style="float: left; margin-left: 15px; margin-right: 15px;" title="Suite Room with Double Bed and own Sitting Room" /></p>
<p style="float: left; min-width: 180px;"><strong>Suite Room with Double Bed and own Sitting Room</strong></p>
<div style="clear: both;">&nbsp;</div>

2 columns thing - easier version (responsive)

http://www.scomadi.co.uk

HTML - Easy Version

<p><img style="float: left;" src="/images/pages/home/white-scomadi.jpg" alt="white-scomadi" width="327" height="260" /></p>
<div style="float: left;">
	<p>Turismo Leggera</p>
	<p>
		The Turismo Leggera range represents the<br />culmination of 10 years of prototype development.<br />Utilising the experience of Scooter Innovation &amp; PM<br />Tuning Racing Products, Scomadi are aimed at<br />providing a new era in scootering for followers of<br />iconic Italian design.<br />With styling cues taken from the Grand Prix model<br />the goal was to create a "Modern Classic".<br />A machine that allows the true enthusiast to retain<br />classic styling without sacrificing reliability or<br />modern day functionality. The Turismo Leggera 250<br />was initially released as a carbon fibre,10 machine<br />limited edition hand built in the UK.<br />Demand for further machines evolved into another<br />30 handmade 300cc machines with the latest mass<br />production series of Scomadis presented today.<br />The Turismo Leggera range will present a dynamic<br />package for the discerning scooterist available<br />firstly as air cooled 50cc and 125cc engine options<br />with a flagship model 300cc due for mid 2014.<br />The Scomadi TL300 will be equipped with the Piaggio<br />“class leader”: QUASAR- 300, 4 valve, liquid cooled,<br />engine. One of the lightest, most compact, and<br />powerful 300cc motors on the market. Powered by<br />22HP at 7,500 rpm. The TL300 ensures top<br />performance in terms of speed and acceleration with<br />reliability.
	</p>
</div>

HTML - Image on alternating side, float left then float right

http://www.sidescansystems.com/brite-side-scan-system

<p>
	The system consists of 4 Ultrasonic sensors mounted down the left side fo the vehicle and a warning display mounted in the cab. When the left hand indicator is on the unit will sense the presence of a cyclist, pedestrian or vehicle and give its posistion and range up to 1.5 mtrs. At the same time, a spoken voice warning is played saying &quot;This vehicle is turning left&quot; to warn anyone on the nearside.
</p>
<p>&nbsp;</p>
<p style="text-align: right;"><img alt="Side Scan Kit" class="frame-2" src="/images/side-scan-kit.jpg" style="float: right;" title="Side Scan Kit" /></p>
<p style="margin-left: 80px;"><strong>Features</strong></p>
<ul class="tick" style="margin-left: 80px;">
	<li>4 x Ultrasonic Sensor with 1.5 mtr range</li>
	<li>In cab warning unit which displays range and position</li>
	<li>98db Voice Sounder - &quot;This vehicle is turning left&quot;</li>
	<li>IP68 Waterproof rated</li>
	<li>12v-24v operation</li>
	<li>Can be fitted to almost any vehicle</li>
	<li>Low speed sensing - shuts off at higher speeds</li>
</ul>
<div style="clear: both;">&nbsp;</div>

<p>&nbsp;</p>
<p><img alt="Choice of Sensors" class="frame-2" src="/images/choice-of-sensors.jpg" style="float: left; margin-left: 15px; margin-right: 15px;" title="Choice of Sensors" /></p>
<p>
	<strong>Choice of sensors - Underslung or Flush Mount</strong><br />
	(Depending on application)
</p>
<div style="clear: both;">&nbsp;</div>

Overflow Notes

These are some notes that i used when creating these code samples.

• for the overflow with image trick to work. the image must not be in the same container as the text, ie the <p>, this must be seperate otherwise you are just enabling overflowing for both of them putting you back to square 1.
• the image and paragraph need to be grouped together in their own container. ie a <div>
• the div needs the overflowing enabled because the div will expand with the text not wrapping
• the <p> containing the text will need overflowing enabled because it too will expand due to the text not wrapping.
• also to stop full on text squashing you should use min-width: 180px;
• correction, only the containing <p>/<div> will need the overflow. but they still need to be grouped together so the browser knows  what to overflow
  
  
• correction, the overflow: hidden on the primary containing div (ie hold the img and the <p>), its purpose is to allow the whole conatiner to resize. if you just have the text overflow command the text does not wrapp around the image but dissaperas off the side of the browser
• min-width: is the best width for showing text on an iPhone. i worked this out by experimenting
  
  
• overflow seems to of been the key - see css - How to make an inline-block element fill the remainder of the line? - Stack Overflow (the example  code - http://jsfiddle.net/qx32C/36/)
• The magic of “overflow: hidden” — Articles — Colin Aarts, freelance web developer
• both overflows are inportant, the widths etc can be changed