By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,724 Members | 1,707 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,724 IT Pros & Developers. It's quick & easy.

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

P: 2
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:

Expand|Select|Wrap|Line Numbers
  1. .video { display:inline-block; float:right; position:relative; margin-left:15px; padding:10px; border:1px solid gray; }
  2. .top_article { margin:0 0 0.5em 10px; font-family:arial,sans-serif; width:90%; }
  3. .new_story { padding-bottom:1em; }
The DIV's are arranged as follows:

Expand|Select|Wrap|Line Numbers
  1. <div class="new_story">
  2.    <div class="video"></div>
  3.    <div class="top_article"></div>
  4. </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.
Jan 16 '08 #1
Share this Question
Share on Google+
2 Replies


P: 32
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.
Jan 17 '08 #2

P: 2
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.
Jan 18 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.