Hi,

I have a container div with 2 child elements (a <b> tag and a <p> tag). The container width is 100%, the <b> tag width is unknown as is the <p> tag. I have floated both child elements to the left but when the <p> tag overflows the entire <p> tag is placed underneath the <b> tag. How can I get it to always display on the same line?

Note: this works and appears correctly in Internet Explorer. The issue is only present in Firefox.

I have coded the page to work in such a way that if the text overflows, it scrolls into view on hover.

Code:
<html>
	<head>
		<style type="text/css">
			body
			{
				margin: 10px;
				padding: 0px;
			}
			.marquee
			{
				margin: 0px;
				padding: 0px;
				width: 100%;
				height: 16px;
				clear: both;
				cursor: pointer;
			}
			.marquee b
			{
				margin: 0px;
				padding: 0px;
				height: 16px;
				font-family: Georgia;
				font-size: 12px;
				font-weight: bold;
				color: #000000;
				float: left;
			}
			.marquee p
			{
				margin: 0px;
				padding: 0px;
				height: 16px;
				font-family: Georgia;
				font-size: 12px;
				font-weight: normal;
				color: #666666;
				float: left;
				overflow: hidden;
			}
		</style>
		<script type="text/javascript">
			var broken = true;
			var element;
			var text;
			var color;
			function scroller(id)
			{
				var e = document.getElementById(id).childNodes[1];
				if(e.clientHeight < e.scrollHeight)
				{
					broken = false;
					element = e;
					text = e.innerHTML;
					scroll();
				}
			}
			function scroll()
			{
				if(!broken)
				{
					if(element.innerHTML.length > 0)
					{
						element.innerHTML = element.innerHTML.substring(1,element.innerHTML.length);
						setTimeout('scroll()',50);
					}
					else
					{
						element.style.color = '#ffffff';
						element.innerHTML = text;
						fade();
					}
				}
				else
				{
					element.innerHTML = text;
				}
			}
			function fade()
			{
				if(!broken)
				{
					if(element.style.color != '#666666')
					{
						switch(element.style.color)
						{
							case '#ffffff':
								element.style.color = '#eeeeee';
								setTimeout('fade()',100);
								break;
							case '#eeeeee':
								element.style.color = '#dddddd';
								setTimeout('fade()',100);
								break;
							case '#dddddd':
								element.style.color = '#cccccc';
								setTimeout('fade()',100);
								break;
							case '#cccccc':
								element.style.color = '#bbbbbb';
								setTimeout('fade()',100);
								break;
							case '#bbbbbb':
								element.style.color = '#aaaaaa';
								setTimeout('fade()',100);
								break;
							case '#aaaaaa':
								element.style.color = '#999999';
								setTimeout('fade()',100);
								break;
							case '#999999':
								element.style.color = '#888888';
								setTimeout('fade()',100);
								break;
							case '#888888':
								element.style.color = '#777777';
								setTimeout('fade()',100);
								break;
							case '#777777':
								element.style.color = '#666666';
								setTimeout('fade()',100);
								break;
						}
					}
					else
					{
						scroll();
					}
				}
				else
				{
					element.style.color = '#666666';
					element.innerHTML = text;
				}
			}
		</script>
	</head>
	<body>
		<div id="0001" class="marquee" onMouseOver="scroller(this.id);" onMouseOut="broken = true;"><b>New Xbox Dashboard&nbsp;&nbsp;</b><p>Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard. Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard. Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard. Anticipation builds as Microsoft prepare to unveil their new Xbox 360 dashboard.</p></div>
		<div id="0002" class="marquee" onMouseOver="scroller(this.id);" onMouseOut="broken = true;"><b>Another New Xbox Dashboard&nbsp;&nbsp;</b><p>Anticipation builds</p></div>
		<div id="0003" class="marquee" onMouseOver="scroller(this.id);" onMouseOut="broken = true;"><b>Yet Another New Xbox Dashboard&nbsp;&nbsp;</b><p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...</p></div>
	</body>
</html>
The live page can be viewed here: http://www.vouzamo.co.uk/scroller