The images you see on the right are contained in a div that is floated right, the class on that div has "clear:right", if you look at it in Firefox, the text on the left displays as it should.
But when viewed in IE, the 2nd paragraph drops under the first pic.
Could someone guide me into what I am doing wrong please?
Try using a line-height declaration in your CSS. Maybe the problem is that IE renders line-heights differently for what you're trying to do. So therefore, the text won't be properly lined up with the image. That's just a guess.
One option would be to create two divs, one for copy and the other for pics. Put them both within the full container, give them widths and float one left and one right.
The issue you are running into isn't a float issue, but rather a clear:right issue that you added to the pagepics class.
To fix the problem put both of these classes before your main content...
<h1>Brick it up with ease</h1> <h2>Choose from many different styles</h2> <div class="pagepics"><img src="test.jpg" width="140" height="140" /></div> <div class="pagepics"><img src="test.jpg" width="140" height="140" /></div>
<p>At our wealth of experience will help you get just the right blocks and facing bricks for every project. We offer unrivalled brick matching, either from stock, sample or site visit, with the closest possible match for texture and colour.</p>