How to fill the gap?

HTML & CSS
1

Hi guys,

I have a layout that will have one, two or three images in a row. They are each floated left and have a fixed width of 240px. What I want to be able to do though is to put some text at the end of them so that if there are only one or two images that the text will fill the gap left on the right hand side. If there are three images then the text will be a full width. I thought I could just set a width:auto but all that does is goes full width and down below the existing images.

Is there a simple was to do this?

Cheers

2

Try experimenting with something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
.content{
	border:solid;
	width:750px;
	overflow:hidden;
}
.content img{
	float:left;
	margin:5px;
	background:#fc0;
}
.content p{
	margin:5px;
	overflow:hidden; /* stay clear of the floats */
}
</style>
</head><body>

<div class="content">
<!--
	<img src="" alt="" width="240" height="160">
-->
	<img src="" alt="" width="240" height="160">
	<img src="" alt="" width="240" height="160">
	<p>Lorem ipsum dolor sit amet consectetuer malesuada laoreet Morbi tortor et. Ut elit et Aenean id condimentum et enim vel gravida Lorem. Aliquam ipsum pellentesque et malesuada laoreet Morbi hendrerit pulvinar lobortis et.</p>
</div>

</body></html>