Question

lately i’ve been slamming my head against my desk to solve this Problem. Didn’t work out. I know it can be solved by editing the contents with some clearing elements. Sadly there is some javascript sorting beeing used and the Sourcode is being generated by CMS Components so that would be my last shot.

I’m having a few boxes beeing floated alwayes 2 in a row. The boxes have a diffrent height but equal width and are all placed in a container with static width. The link shows the source i need to reproduce the Problem. My Boxes are beeing floated left. I tried to fix this with clear: left on odd and clear: right on even elements. But that only works in ff/ie8/chrome Browsers, not ie7.

Example: http://www.i3rutus.de/ie7divfloatexample/

Anyone knows a possibility to fix this Problem by just editing the CSS not the actual XHTML? Problem appears in IE7. IE8, Chrome and FF work fine.

Any Ideas?

Thanks in advance

Answer 1

Here’s the deal. You only need to float one of each of the pairs of boxes. Here’s the amended css rules:

  .even {
  float: left;
  clear: left;
  margin-top: 0
  }

  .odd {            
  }

Demo

(Incidentally, your use of odd and even had me chasing my tail for a while 😉 )