IE7 div boxes with clear: right and float: left - float to top

Question

Hey,

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

If you are able to include a js in the header then maybe try to use http://code.google.com/p/ie7-js/?

I played with it but given float:right screws it up, it's probably a little more complex than experimenting with float values.

-- update --

I seemed to be able to get it work in ie7 by:

remove float:left on .clear, added float:left;margin-top:0px to .even

Answer 2

Just remove

.even {
    clear: left;
}
.odd {
    clear: right;
}

and it works as intented.

Answer 3

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 ;) )