IE7 - floated elements on new line

Question

(Apologies as this is probably the gazillionth version of this bug, but I've googled for various flavours of this problem, and tried various versions of the suggested fixes, but so far I haven't got a working fix.)

I'm trying to float 2 buttons to the right-hand end of a header bar. They have to float as one or both or neither may be displayed (they're buttons to redisplay hidden elements on the page)

Here's an image comparing the desired layout with the IE7 version.

Small JPG Image on Skydrive

As you can see, both buttons (and also a filler div that just contains a space) are below the header bar rather than inside it.

Here's the page...

             <div class="divHeaderBar">
                Welcome To James Hay Online
                <div id="filler" style="display: inline-block; *display: inline; float: right; width: 20px; height: 10px; z-index: 60;"> </div>
                <div id="divShowApplyOnline" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
                    onclick="javascript:ShowApplyOnline()" runat="server">
                    <img title="Show the Apply Online section" src="/portal/images/details_open.png"
                    alt="Show the Apply Online section" />
                </div>
                <div id="divShowMainFeature" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
                    onclick="javascript:ShowMainFeature()" runat="server">
                    <img title="Show the News Feature section" src="/portal/images/details_open.png"
                    alt="Show the News Feature section" />
                </div>
            </div>

And here's the one bit of styling that's in a stylesheet...

.divHeaderBar {
   background-color:       #008DA9;
   color:                  White;
   font-weight:            bold;
   font-size:              10pt;
   line-height:            30px;
   text-indent:            10px;
}

I've tried fiddling around with position: absolute and right: 0, and I've tried using a containing div with float: left but so far nothing I've tried has done the trick.

Any help would be much appreciated!

Answer 1

Switching the markup position should help:

     <div class="divHeaderBar">
        <div id="filler" style="display: inline-block; *display: inline; float: right; width: 20px; height: 10px; z-index: 60;"> </div>
        <div id="divShowApplyOnline" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
            onclick="javascript:ShowApplyOnline()" runat="server">
            <img title="Show the Apply Online section" src="/portal/images/details_open.png"
            alt="Show the Apply Online section" />
        </div>
        <div id="divShowMainFeature" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
            onclick="javascript:ShowMainFeature()" runat="server">
            <img title="Show the News Feature section" src="/portal/images/details_open.png"
            alt="Show the News Feature section" />
        </div>
        Welcome To James Hay Online
    </div>

The right floated elements come first - then everything else. This way, IE7 should float them correctly.

Tip: : consider separating your HTML, CSS and Javascript. Inline CSS and inline event handlers are not a very good idea. Separation of concerns will improve readability and maintainabilty.