CSS Div Wrapping in IE7: Your help would be appreciated.

[dreadsword]

Hey all - I'm having a problem with getting text to wrap around a DIV in IE7. It of course renders nicely in FF.

The page in question is http://techwatching.com.

The content on that page changes regularly, so here are two screen grabs:
FF2 behaviour, as it should be everywhere
IE7 wrapping issue

The classes are like so:

.video { display:inline-block; float:right; position:relative; margin-left:15px; padding:10px; border:1px solid gray; }
.top_article { margin:0 0 0.5em 10px; font-family:arial,sans-serif; width:90%; }
.new_story { padding-bottom:1em; }

The DIV's are arranged as follows:

<div class="new_story">
   <div class="video"></div>
   <div class="top_article"></div>
</div>

If you take a look at the page code, you'll see its a real dog's breakfast - I'm by no means a designer or coder by profession - strictly a weekend warrior.

That being said, I'm stymied by this one and would really appreciate any assistance you can share. I've tried reorganizing divs, different "display:" settings, "position:" settings, etc. to no avail. If tried it with and without "min-height" as well.

Any suggestions?

-Rod.

[garrow]

I think it might be something to do with inline-block, its not supported in firefox.

If you put a 1px border on new_story you'll see its top left corner is actually at the top left corner of the video box.
IE appears to be trying to push the content as far right as possible to fit inside this box.

You shouldnt use inline-block for floats anyway, as block and float takes it out of out of the flow of the document.

[dreadsword]

Garrow - thanks for the reply; I've changed out the php script that generates the output, so at least it should be easier to experiment now - first thing I'll try will be your suggestions.

Thanks and regards,
-R

I think it might be something to do with inline-block, its not supported in firefox.

If you put a 1px border on new_story you'll see its top left corner is actually at the top left corner of the video box.
IE appears to be trying to push the content as far right as possible to fit inside this box.

You shouldnt use inline-block for floats anyway, as block and float takes it out of out of the flow of the document.