floating problem - with block heights

Hello,

Does anyone have a solution for my floating problem.
Please take a look at http://www.fabriek81.be/testblog.html, as you can see newsitem 3 is not floating all the way to the right because block 2 is not as long as newsitem 1.

I would like to get something like http://desandro.com/resources/jquery-masonry/ or http://mootools.net/forge/p/moomasonry, but I can't figure out how to do that.

If anyone can help me?

Bert

Since you are using the news list, each item has a class of "even" or "odd".

Try setting a style of "clear: left" to your "even" items only.

thanks for your response, but it doesn't seem to solve the problem

Code:

---

.mod_newslist .even, .mod_newsarchive .even {
    float: left;
    clear: left;
    padding: 5px;
    width: 370px;
}

---

It works -- I tried it in Firebug. :)

Those Masonry plugins look cool, but I haven't worked with them before so I can't be of help there.

The only other option would be to give every block a fixed height.

Meianomaly,
Thx. That fixed the problem indeed!

Do you also know a solution if there are 3 columns for example? So when it's not possible to work with odd and even?

In a perfect world you could use CSS3's "nth child" selectors -- so for instance you'd be able to style every 3rd element, and that would do what you want. If you're only supporting bleeding-edge browsers, you can try that -- I'd defer to a CSS reference site on that one.

Unfortunately if you're talking real-world, those selectors won't work in IE and some other browsers.

What you'd have to do is manually edit a template to add a special CSS class to every third element. This would require some HTML editing and a bit of PHP knowledge.

Similarly, you could also programmatically wrap each row in an extra tag that you apply "clear: both;" to.

I know this isn't specific, but hopefully it would be enough to get you started.