IE7, floated element, content wrapping, bug?

I am hoping someone has experienced something similar to this and can point me in the right direction as it is driving me nuts.

I have the following code set up (I'm sorry I can't supply a test link) and it displays great in FF, Chrome, IE8 but in IE7 and IE6 I am experiencing a weird float/wrapping issue.

It appears, for no apparent reason, the h1 tag and h2 tag, although no width is set, is being wrapped.

<div style="width:900px; margin:0 auto;">

<h1 style="float:left; background:#ccc">a long title with background behind text<h1>
<h2 style="float:left; background:#ccc">a longer sub title that also has a background behind text.<h2>

</div>

which is displaying like:

a long title with background

behind text

and

a longer sub title that also has a

background behind text.

If I remove the float, the background color spans the entire width (which I don't want) but the text no longer wraps.

Anyone have any ideas?

::edit::

Here is some additional information/screenshots.

The following graphic shows the two displays. the top is how it shows in IE6, IE7, and IE8 using Document Mode: IE7 Standards.

The bottom is FireFox, IE8 normal mode, Chrome

http://awesomescreenshot.com/0a4en0paa

In my troubleshooting I have determined that the line that wraps is influenced by the line above it. Example: if the crumb is long, the title will have a short wrap, if the crumb is small, the title may not wrap at all.

If I make the

display:inline the title will display correctly but the sub title will wrap based on the length of the title. Also making it an inline element ruins the padding around the text.

Actual code:

<div id="hero" style="background:url(images/bg-hero.jpg) center top no-repeat;">
    <div class="panel-content">
        <p style="background:rgb(0,100,175); background:rgba(0,100,175,.6);">this / is / a bread / crumb / trail / which seems to influence the following item's width</p>
        <h1 style="background:rgb(0,100,175); background:rgba(0,100,175,.7);">Title of the page which should span the width</h1>
        <h2 style="background:rgb(0,100,175); background:rgba(0,100,175,.6);">sub title which should behave the same way and span the availble width</h2>
    </div>
</div>

CSS:

#hero { position:relative; z-index:0; color:#fff; width:100%; min-width:1024px; margin:0 0; overflow:hidden; height:238px; background:url(images/bg-hero-default.jpg) center top no-repeat }
#hero .panel-content {  width:978px; min-width: 978px; margin:0 auto; padding:35px 23px 0; position:relative; }
#hero p { float:left; font-size:1.5em; line-开发者_开发知识库height:1.6em; padding:0 5px; margin:0 0 5px; }
#hero h1 { float:left; clear:both; font-size:4em; padding:0 5px 3px; margin: 0 0 3px; color:#fff; line-height:1em; }
#hero h2 { float:left; clear:both; font-size:2em;  padding:0 5px 3px; margin:0 0 3px; }

add a white-space:nowrap; to your hx declaration

#hero h1 {float:left; clear:both; font-size:4em; padding:0 5px 3px; margin: 0 0 3px; color:#fff; line-height:1em;white-space:nowrap; }
#hero h2 {float:left; clear:both; font-size:2em;  padding:0 5px 3px; margin:0 0 3px;white-space:nowrap; }

work for me in ie8, ie7 mode.