Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?

Question

I\'ve got a parent div floated left, with two child divs that I need to float right.

The parent div should (if I understand th

Answer 1

I came up with a solution using text-align: right and display: inline.

Try this:

    

        
Tester 2
        
Tester 1
    

Notice I had to switch the order of the "tester" boxes in the markup to show up in the same way as your example. I think there is an alternative that margin-top on the new container, but I don't have time looking into right now.

If you want cleaner styling for all other browsers try this:

    

        
Tester 2
        
Tester 1
    

There are some different issues that can come up when you want to layout stuff around those boxes. However, I think those issues will be much easier to solve than this one.

Hope this was helpful for you.