This works on every browser except IE.
Ok I set up a simple image Rounded corners container.
Check the bottom of the container in Firefox, then in IE.
How can I fix this?
I know it's because I used in my css (top: -14px;) for the images, but that's only because they weren't showing up properly in Firefox without it.
If using floats it's vital
If using floats it's vital to understand how they work. Do a search on 'containing floated elements' for an understanding.
In this layout your .container is not containing your floated elements, this is correct! IE is wrong (you have set hasLayout through the use of dimensions thus triggering IE extremely bad behaviour in expanding elements to contain children)
Add overflow:hidden to .container and then try setting .bl/.br to bottom:0; instead of top:-15px;
Not sure how IE will take that though.
the Overflow hidden was vital.
If not with floats what's a better way to align divs left and right (on the same line)?
Thanks for the help!!
Floats is the standard way
Floats is the standard way to do it, you just have to clear them, is all