Problem with Firefox and Floats

firefox, positioning, css, floats

[robinwilson16]

Hello

I have made the following website and everything worked ok in all browsers when I used a table to hold the left navigation and the content on the right. I then converted to div tags and everything seemed ok but then I viewed the site in Firefox and it looks terrible.

I've done some checking and it appears that in Firefox when you have a div floated to the left at a set size and a div floated to the right without a set size instead of the div going to the right it stacks underneath the other floated div filling the page when there is enough text in it instead of flowing the text onto new lines like in IE.

I've messed around with it but cannot seem to find a way other than putting in manual page breaks on every page within the text.

So what is happening is that the left navigation bar is above the main content instead of to the right whereas in IE it looks fine.

If I can't fix it I may be forced to return to tables :(

Thanks for any help

Robin

[edited by: encyclo at 2:25 am (utc) on Nov. 15, 2007]
[edit reason] no URLs thanks [/edit]

[Xapti]

If you take a look a the rules you cannot post URLs to your site. You're supposed to post the relevant HTML and CSS. (you may want to make a test case or stripped down version to make sure things are working as they are supposed to, and/or to show us)

Firefox has much better rendering, conforming to the W3C standards much better than Internet Explorer. That is why you should to site design with a browser such as Firefox or Opera FIRST, and then do bug tweaks for other browsers.

You should also check out he W3C's CSS specification to see how floats are actually supposed to behave. Here's a link:
[w3.org...]

It is quite likely that you are expecting a different sort of float behaviour which IE is giving, when it should really be something else.

[robinwilson16]

Hello encyclo

Sorry for breaking the rules, I didn't mean to.

Here is an example of what I mean (when there is enough text in the second span it flows underneath the other in Firefox instead of wrapping the text earlier. In IE it displays how I intended (side by side)). There are some other display problems on my site since moving away from tables but this is the most annoying:

<span style="float:left; width:180px;border: solid 1px">
Some text
</span>

<span style="float:right;border: solid 1px">
Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text,
</span>
<br style="clear:both" />

[Xapti]

This is normal behaviour as far as I know. To rectify it you would need to assign a width to the float. Depending on the situation though, you may not want it floated to the right at all. Simply putting it in the parent element (or in a non-floated div), and setting text-alignment to the right may be all you want.

[edited by: Xapti at 12:30 am (utc) on Nov. 16, 2007]

[robinwilson16]

Thanks, I'll try not floating it and see what happens.

Robin