CSS: img {Float: Left; } gives strange results in Firefox

Question

Hi, I’m having trouble aligning some text to the right
of an image. It looks fine in IE6 but the entire page goes crazy in
Firefox. Here is the link:
http://www.option-price.com/test/index.php
I already have a few pages in place and I just wanted to add
a contact link to the right above the main navigation. Here are the
main pages:
http://www.option-price.com/index.php
The thing is…I could probably do it by creating a
nesting div around the logo div and then another div inside for the
new link (and float to right), but I was trying to cut down on
code.
Can I get this to work using img float in FireFox?
Many thanks.

Answer 1

petertyler wrote:
> Hi, I?m having trouble aligning some text to the right
of an image. It looks
> fine in IE6 but the entire page goes crazy in Firefox.
Here is the link:
>
>
http://www.option-price.com/test/index.php
>
> I already have a few pages in place and I just wanted to
add a contact link to
> the right above the main navigation. Here are the main
pages:
>
>
http://www.option-price.com/index.php
>
> The thing is?I could probably do it by creating a
nesting div around the logo
> div and then another div inside for the new link (and
float to right), but I
> was trying to cut down on code.
>
> Can I get this to work using img float in FireFox?
>
> Many thanks.
>
You would have to float the image in the logo <div>
left. Add another
<div> inside the logo <div> and float that right,
as below.
Html code:
<div id="logo"><img src="index_files/logo.jpg"
alt="Option-Price.com"><div
id="logoRight">Contact</div>
<br style="clear:both;" /></div>
Css:
#logo {
margin: 0px 0px 0px 100px;
padding: 0px;
width: 600px; /* YOU NEED A WIDTH */
#logo img {
float: left;
#logoRight {
float: right;
width: 200px;
text-align: right;
padding-top: 45px;
A simpler method would be to use an absolutely positioned
layer. I can't
see that anything moves on the site which would'nt warrant
the use of an
ap layer in the position you require it.