Need help from Gods of CSS :) for floating an image just right


We are trying to do float an image with CSS and are not getting what we need.
To be exact check out:

We would like to float an image Ad banner of about 200px by 200 px to the right
of the “Search the Network” section. Of course we would want the Ad banner
image to be Vertically Aligned with the Input field of “I am looking for”,
but as you can see this is not happening and the Image float is lining up on
top of the Input field rather than on same line as it the input field.
So when done right the banner Ad should be vertically aligned with the center
of the Input field of "I am looking for and this whole div would be 1/4 of the
height that it is now.

How can when we get the correct affect here?


Hi there
I have had a look at it and this site is set up with tables within tables so it is not just a simple CSS fix.
If you set in the CSS
table { border: thin solid black; }
then you will see that the image is outside the table where you want it.

I improved it by putting the div with the image after the table with the " I am looking for " field.
Make the table width smaller - I think I put 40% but this was maybe a little too small. Give the table a class “float-left”.
Float the image and the table left and they sit together.

If you adjust the table and the table row with the input field then you can make this line up with the image as you wish.

My advice though is dont use tables and then you could use positioning to get what you want.

All the best - Sue