Want to get CSS Text Wrap working in IE7

Question

The following code renders great in FF3 but doesn't work in IE7. Does anyone have an idea how to fix it?

<div style="padding-top:3px;padding-bottom:5px;width:650px;background:blue">
    <div style="height:50px;float:left;display:inline;width:500px;background:gray">http://www.brainsolis.com/2008/10/twitter-tools-for-comunity-and-love-for-...&lt;/div&gt;
    <div style="width:100%;text-align:right;float-right;background:yellow">saaal is saaa twittertool ds ds dsdfsdsdfsdfsdfsdfsdfsd sdf dsf sdf sdf sdf sd ssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
</div>

Thank you very much,

Eiso

Answer 1

You do not need to float an element, and display:inline at the same time. Additionally, you do not need to set width:100% for DIV elements. They will naturally take up all available horizontal space.

The following CSS should achieve what you are attempting.

div.container {

}
  div.floated {
    width:50px;
    float:left;
  }
  div.textbody {
    /* styles */
  }
  br.clear {
    clear:both;
    height:0;
    line-height:0;
  }

<div class="container">
  <div class="floated">
    <p>This is floated</p>
  </div>
  <div class="textbody">
    <p>...text body...</p>
  </div>
  <br class="clear" />
</div>

For more information on CSS, check w3schools, or watch the CSS Videos at SampsonVideos.

Answer 2

I haven't checked your sample but this took care of IE wrapping problems for me:

div { word-wrap: break-word; /* for IE, force it to wrap text and keep it inside the div */ }

Answer 3

the css word-wrap directive is working for me

tried in ie6, 7, 8 and chrome (as usual, firefox wrap my text correctly even without it)

seems to be an IE invention but also css3 compatible (http://www.css3.com/css-word-wrap/)