Whatever Floats Your Boat..APEX Templates, IE and Floats

Recently working with some custom region templates and button placement I ran into an issue with IE (big surprise) and how it was interpreting the float:right CSS attribute. The behavior I was seeing was that in IE the apex button was being pushed down a row and not lining up with my region title. It seems IE hates floats when used in DIVs. But there is a catch...it worked in IE8. So what we could do is set up some IE 7 specific CSS calls to push the button back up using a margin-top:-18px for example. Doing a bit of digging on the interwebz I found the IE support team blog. An article found here pretty much outlined the issue I was having. the solution was the following code:

<span style='float:left;'>

apex region title here

</span>

<span style='float:right; background-color: Yellow;'>

apex buttons here

</span><br clear="both" />

If we add the <br clear="both" /> after the span sections, it not only works in IE 7 but IE 8 and firefox. An interesting solution but one that works. Maybe someone will ask the IE support team "Why?" in a future blog posting from them.