Float inside a float (IE bug)

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • desheffer
    New Member
    • Jun 2010
    • 1

    Float inside a float (IE bug)

    Hello all, I'm having an issue with (something like) the following:

    <div style="backgrou nd:blue; float:right;">
    <div style="backgrou nd:orange; float:right;">A AA</div>
    </div>

    In FF, I see none of the blue of box, only the orange 'AAA' box floated to the right, exactly as I expect. In IE, however, the blue box fills the page width 100%. It's as if it has lost its float.

    I've been searching for a few hours, and although there are a lot of discussions on IE bugs, I couldn't find one on this particular issue. Any ideas how I can prevent this?
  • JKing
    Recognized Expert Top Contributor
    • Jun 2007
    • 1206

    #2
    I think this is an issue with how the two browsers choose a width for your outside div. IE seems to be defaulting to a width of 100%. Applying a width to your outer div will fix this issue.

    Comment

    Working...