Float issues in FireFox.

[Archon MkIV]

Hello.

This has annoyed me so outrageously many times I figured it's about time I get it right.

This is Safari (which displays it right):
http://www.forryktindustries.com/files/float_safari.jpg

This is FireFox (which displays it mindboggingly wrong):
http://www.forryktindustries.com/files/float_firefox.jpg

This is my CSS code:
.url { float: right; }

This is my HTML code:
<div class="item_s1_info">
<span class="label">Client</span> Chateu Bar
<span class="url"><span class="label">URL</span> None</span>
<div class="separator"></div>
<span class="label">Case Study</span>
<p class="casestudy">Cheateu Bar needed a logo with an urban feel to it, although
preserving the fact that they also do outdoor catering. The outcome was a
nice middle ground between sharp and smooth, urban and natural, suiting
the many purposes of the firm nicely.</p>
</div>

How can I correct this?

Thanks,
arch.

[cyber1]

Can you post a link to the page or the whole code?

-Bill

[ShrineDesigns]

it looks like safari is like opera, it uses padding for the body, instead of the incorrect method of using marginbody {
margin: 0%;
padding: 90px 0px 0px;
}

[Archon MkIV]

I'm afraid not, Bill. It's in the screenshots, though.

it looks like safari is like opera, it uses padding for the body, instead of the incorrect method of using margin

Hmm... okay... well what does that have to do with anything?

[ray326]

To the left in a div you've got some bare text, some of which is wrapped in a span. Then you have a span with the "url" class in which the float style forces the span to be a block instead of inline. The implicit block occupies 100% of the width of its container, which forces it below the bare text preceding it (implicit paragraph). In other words, it looks like Fx is rendering it correctly and you need to give the two halves widths totaling less than 100% to get them to position as you like.

[Archon MkIV]

Thanks a bunch ray. :)