HTML CSS Float Images Around Text NOT Text Around Image - html

Question

So my title, I hope, pretty much explains what I am trying to do - Floating text around an image is easy - I want the opposite, if I have some text, and multiple images I want the images to float around the text.
Google pretty much just returns "floating text around an image" so I hope you guys can help.
E.G. Suppose I have this HTML (pls ignore the inline styling):
<div>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/F1_logo.svg/220px-F1_logo.svg.png" style="float: right; clear:both; margin-top:10px;">
<p>Formula One, also known as Formula 1 or F1 and referred to officially as the FIA Formula One World Championship,[2] is the highest class of single-seater auto racing sanctioned by the Fédération Internationale de l'Automobile (FIA). The "formula", designated in the name, refers to a set of rules with which all participants' cars must comply.[3] The F1 season consists of a series of races, known as Grands Prix (from French, originally meaning great prizes), held throughout the world on purpose-built circuits and public roads. The results of each race are evaluated using a points system to determine two annual World Championships, one for the drivers and one for the constructors. The racing drivers, constructor teams, track officials, organisers, and circuits are required to be holders of valid Super Licences, the highest class of racing licence issued by the FIA.[4]</p>
<p>F1 cars are the fastest multi-turn circuit-racing cars in the world, owing to very high cornering speeds achieved through the generation of large amounts of aerodynamic downforce. Formula One cars race at speeds of up to 350 km/h (220 mph) with engines currently limited in performance to a maximum of 15,000 RPM. The cars are capable of lateral acceleration in excess of five g in corners. The performance of the cars is very dependent on electronics – although traction control and other driving aids have been banned since 2008 – and on aerodynamics, suspension and tyres. The formula has radically evolved and changed through the history of the sport.</p>
<p>While Europe is the sport's traditional base, and hosts about half of each year's races, the sport's scope has expanded significantly during recent years and an increasing number of Grands Prix are held on other continents. F1 had a total global television audience of 527 million people during the course of the 2010 season.[5]</p>
<p>Grand Prix racing began in 1906 and became the most popular type internationally in the second half of the twentieth century. The Formula One Group is the legal holder of the commercial rights.[6] With annual spending totalling billions of US dollars, Formula One's economic effect and creation of jobs is significant, and its financial and political battles are widely reported. Its high profile and popularity have created a major merchandising environment, which has resulted in great investments from sponsors and budgets in the hundreds of millions for the constructors. Since 2000 the sport's spiraling expenditures have forced several teams, including manufacturers' works teams, into bankruptcy. Others have been bought out by companies wanting to establish a presence within the sport, which strictly limits the number of participant teams.</p>
Now this ALMOST achieves what I want until the number of images means that the images are "longer" than the text. When the images are longer than the text I then want them to wrap underneath the text, e.g.
text text text text IMAGE
text text text text IMAGE
text text text text IMAGE
text text text text IMAGE
IMAGE IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE IMAGE
Is this possible? I need to achieve it using only HTML and CSS.
For every page I want to do this the text length and number of images could be different.
Thank you to anyone who replies.
Here's my solution dev'd using the kind answers below - I didn't get exactly what I wanted originally but I got something that fulfilled my purpose.
Note that this puts the images on the left hand side - not right as originally asked for above - it looked neater on the left.
HMTL:
<div id="maindata">
<div id="maintext">
<h2>Ferrari</h2>
<p>They are red.</p>
<P>I like them</p>
</div>
<img class="image" src="http://www.myimagehost.com/ferrari1.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari2.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari3.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari4.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari5.jpg" />
<img class="image" src="http://www.myimagehost.com/ferrari6.jpg" />
</div>
CSS:
#maindata {
float: left;
width: 100%;
}
#maindata #maintext{
margin-top: 15px;
float: right;
width: 63%;
padding: 10px;
}
#maindata .image{
max-width:28%;
margin-top: 15px;
padding: 10px;
}
Fiddle of solution: http://jsfiddle.net/k0rsc5u7/

Answer 1

I would start by first floating the text 'container' to the left with a width less than the page width so that you have space left for the images to sit, then just add the images.
They should start after the text then fall to the left of the page once they reach the bottom.
There may be other things to consider, like when you have your images to the right of the text, in your example they are one on top of the other, then when they fall to the left, they are side by side - you may need more html/css to sort this.

Answer 2

When you want to float text around an image, you apply float to the image.
Here, you want to float images around a text, so you should apply float to the text ;)