A logistical Float nightmare!

[Luther]

Hello good people of the forum!

I have a little problem with floating and clearing elements on a page on a site I'm developing...

The URL is http://www.xyzmagazine.co.uk/xyz_music_reviews.php
(CSS: http://www.xyzmagazine.co.uk/css/layout.css)

There are several <div> elements containing an <img> set to float:left and some text. I have placed a clearing element in each <div> ( <br class="clearfloat" /> ) to force each <div> to wrap under the preceding <div>'s floating <img>.

The problem is this clearing element is forcing the elements to display below the two floated side columns, even though they are outside the central column <div>


It's such a simple effect I'm trying to achieve I just can't see where I'm going wrong!!


Thanks in advance

[DaveWoods]

You'd be better of getting rid of the <br> completely and then just clearing your floats like this...

.floatblock {
  width: 100%;
  overflow: hidden;
}

[Luther]

That's perfect, thanks!

It was the fact I hadn't specified the width that was causing the stack... doh!

[DaveWoods]

Yeah, although if the text was to ever be shorter in height than the image then the overflow ensures that you won't encounter any problems.

Leaving the overflow out of the code will work with the code you provided but I included it so that your page was future proof to any strange dynamic updates