Floating divs and tables

[Hugene]

Hi everyone, I have an odd problem with <div> and <table>. Here is what I have:

<div style="margin: 3px 20px 3px 20px;">

<div style="float: right; margin: 2px 2px 2px 2px; ">
SOME CODE
</div>

SOME CODE 2

</div>

This renders perfectly in both Firefox and IE as:

SOME CODE 2 SOME CODE

Now, there is a problem: if SOME CODE 2 is actually in a <table> then I get:

SOME CODE

<table>SOME CODE 2</table>

instead of having both divs at the same level one next to each other

So what I did is to add an extra <div float> around the table, so that I now have:

<div style="margin: 3px 20px 3px 20px;">

<div style="float: right; margin: 2px 2px 2px 2px; ">
SOME CODE
</div>

<div style="float: left; margin: 2px 2px 2px 2px; ">
<table>
SOME CODE 2
</table>
</div>

<div style=\"clear:both;\">&nbsp;</div>

</div>

In IE this renders fine:

<table>SOME CODE 2</table> SOME CODE

But in Firefox it is like this

SOME CODE
<table>SOME CODE 2</table>

Now, if I remove the <div style="float: left; margin: 2px 2px 2px 2px; "> around the table, Forefox renders the page fine, but IE renders the <table> below the SOME CODE.

I don't understand: in one case it doesn’t work in IE, in the other it doesn't work in Firefox. What can I do? I have been playing for hours with this div thing and I still can't figure it out, it's driving me slightly nuts.

[D_Blackwell]

The code sample is working fine for me (floated left and right with no vertical bump) in FF, Opera, IE. Maybe something else is interfering with the full code.?