ie7浮动右父母宽度问题

Question

This one is really getting my goat. I need to float Container1 and Container 2 to the right and have them butt up against each other as they are now. I also need to float items inside Container2 to the right so they stack on each other. Problem is if I set anything inside Container2 (sample text 2, sample text 3) to float right it makes Container2 width 100% or something.

This could be solved by giving Container2 a specific width but that is not possible as all of this is dynamic content. I need Container2 to grow as i stack things inside it.

Is there any way around this? It is only a problem in ie7 all other browsers seem to be fine. This is driving me mad.

<div>
    <div style="width: 100px; height: 100px; background: green; float: left;">
    </div>
    <div id="Container1" style="height: 100px; border: 1px solid #000000; float: right;">
        sample text 1
    </div>
    <div id="Container2" style="height: 100px; border: 1px solid #000000; float: right;">
        <div style="float: right; border: 1px solid #FF0000;">sample text 2</div>
        <div style="float: right; border: 1px solid #00FF00;">sample text 3</div>
    </div>
</div>

Answer 1

I couldn't find a fix to this bug in Internet Explorer 7.

There might be one, I don't know. I tried all the usual tricks.

Here's some reworked code utilising display: inline-block .

It looks identical to your old code in IE8, and is consistent in IE7/8 and other modern browsers. Yay!

See: http://jsfiddle.net/SUPhf/

There are a number of things to be aware of:

• See these links to get a feel for display: inline-block :
  • Especially this: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
  • And also: http://www.brunildo.org/test/inline-block.html
• I had to swap the order of elements in the source code to keep the visual display the same.
• Whitespace in your HTML is significant when you're using display: inline-block .
  • Compare the fully fixed link above to this version, where the only change is extra whitespace:
    http://jsfiddle.net/SUPhf/1/

Now that you're aware of those caveats, this should be fine.