Floating image problem

<rant on>ugly popups… hate them </rant off>
When you float something and it’s not wide enough to take up all the place, the next floated element (in this case the next image) will get “glued” to the previous one.
Instead of “float” you could try
text-align: left;

Yes, I tried that one out already. But look what happens: https://www.fan-sites.org/audrey-tautou/?page_id=35

Can’t stand popups, either so this is my one and only suggestion – create a wrapper div for the image and associated text.

Ah, welcome to one of the fun bugs in browsers.

I talk about how to solve this on my site as it plagued me until I found the fix.

Basically, some browsers just can’t “tell” the height of the container an image is in. So the float pushes other containers around. You need to fake it out and imply a right. The fix, by https://www.positioniseverything.net is called the “Clearfix” and it basically gives a second CSS reference to a container that instructs it to “clear” itself of the other wraps so it won’t “stick” or push the other ones.

I know it’s hard to explain but I have pictures of what it looks like broken and fixed in the article.

Thanks for the reply. I had a look at that Clearfix thing and put that clearfix-code into the stylesheet. But still… it doesn’t work!

The code used in the page is this:

<div class="excerpt-post clearfix"><br />
<img src="https://fan-sites.org/audrey-tautou/filmography/Poster-Venus.jpg" width="75"/><br /><strong>Venus Beauty Institute (V??nus Beaut??)</strong><br />
Uploaded: July 30th, 2005<br />
Size: 1.25 MB<br />
<a href="https://fan-sites.org/audrey-tautou/media/Trailer-Venus.zip"><strong>Download</strong></a></div>

Is there something wrong?

Yes, is the section where you have your image information in the “excerpt-post” class?

Change the class reference to excerpt-post to whatever was there in your original section. Keep the clearfix and make sure the clearfix CSS is in your style sheet in the theme you are using.

Yes, I forgot the “excerpt-post” part. But now it’s all there:

The code used in the page is this:

<div class="excerpt-post clearfix"><br />
<img src="https://fan-sites.org/audrey-tautou/filmography/Poster-Venus.jpg" width="75"/><br /><strong>Venus Beauty Institute (V??nus Beaut??)</strong><br />
Uploaded: July 30th, 2005<br />
Size: 1.25 MB<br />
<a href="https://fan-sites.org/audrey-tautou/media/Trailer-Venus.zip"><strong>Download</strong></a></div>

And the stylesheet contains the code:

.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}

.clearfix {display: inline-table;}
/* Hides from IE-mac */
* HTML .clearfix {height: 1%;}
/* End hide from IE-mac */
/* End clearfix */

But look, still not working: https://www.fan-sites.org/audrey-tautou/?page_id=35

???

So you’re wanting the small pics in the trailer section directly under each other, right?

I just loaded it in IE and it looks fine…. and fortunately, I have an ad blocker so whatever piece of crap the others got didn’t get me too. You really should disable that sort of thing before you ask for help.

I want the small pics under each other, yes, but I want the text next to it and not under the images as well.

I’m sorry, but I cannot remore the pop-up as it is part of the hosting at fan-sites.org.

Does anyone know how I can solve this problem? Is there something wrong with the code? Or…?

Hmm. For some reason I thought it was working the way you wanted it in FF, so when it looked just like that in IE…. well, anyway…. try putting a second div in there for the stuff you want to sit next to the photo, float that div right with text-align: left; and then clear: both; Mind you, I don’t know that that will work, because right now I have a meeting and don’t have the time to grab your code and mess with it offline, but give it a shot and report back I guess….

Thanks… but it’s not working, I tried it out already ??

Look at this: https://www.fan-sites.org/audrey-tautou/?page_id=35
If I only have one picture, the whole floating-thing is working (I also use the “float” for my category image in the posts and that “Da Vinci Code” picture in the sidebar).

However, if I want more pictures, it doesn’t work and the pictures are next to each other.

While I don’t think this is the underlying cause, you have an extraneous closing paragraph tag here: <a href="https://fan-sites.org/audrey-tautou/media/Trailer-Venus.zip">
<strong>Download</strong></a>
which you should remove for sure. And you have a bunch of validation problems, see this page: w3 validation page. Try cleaning up the errors, then we can take a look again.

I found a solution, God, it’s so easy that I can’t believe I didn’t think of it: TABLES!!

Thanks for the help though, thank you! =)