Float Right not working in Firefox - going on 4 hrs+ to solve

works fine in IE but not Firefox.. I have floated other webpages on the website , just not this one..

it's your basic CSS float with DIV's
header
left col : float left
center col: float left
right col: float right <<<<<< problem is here it stays left
footer

all looks fine except, "right col" overrides left col and renders links inaccessible. Again, IE is fine

Details:
body width is 740px

there is a 4px right margin for "left" and "center"
0 px margin for "right col"

I originally thought is was a size problem but if IE shows it OK why does FF not.?

why is this so frustrating. ?..

I feel Like George Costanza getting upset


-------------------------

<DIV id=left col class=slot>
<DIV><IMG
src="images/tools.jpg" width="277" height="28"></DIV>
<DIV class=copy>
<UL>
<LI><A href=>Trends </A>
<LI><A href="">Check </A>
<LI><A href="">M </A>
<LI><A href="">W </A>
<LI><A href=""> </A>
</LI></UL><</DIV></DIV>

<DIV id=center col class=slot>
<DIV><IMG
src="images/tools.jpg" width="277" height="28"></DIV>
<DIV class=copy>
<UL>
<LI><A href=>Trends </A>
<LI><A href="">Check </A>
<LI><A href="">M </A>
<LI><A href="">W </A>
<LI><A href="">M </A>
</LI></UL></DIV></DIV>

<DIV id=right col class=slot>
<DIV><IMG
src="images/tools.jpg" width="177" height="28"></DIV>
<DIV class=copy>
<UL>
<LI><A href=>Trends </A>
<LI><A href="">Check </A>
<LI><A href="">M </A>
<LI><A href="">W </A>
<LI><A href="">
<IMG src="images/email.gif" width="23" height="18">&nbsp;Contact Us
</A></LI></UL><br><br><br><br><br><br></DIV></DIV>


-----------------------------

in CSS code

DIV.left col {
FONT-SIZE: 0.7em; FLOAT: left; WIDTH: 277px; MARGIN-RIGHT: 4px
}
DIV.right col{
FONT-SIZE; 0.7em; FLOAT: right; WIDTH: 178px; HEIGHT: 100%;
}
DIV.center col {
FONT-SIZE: 0.7em; FLOAT: left; WIDTH: 277px; MARGIN-RIGHT: 4px
}

--------------------------

I tried position: absolute....it didn't work....well it only worked for certain screen sizes 1024 x 768 bvut smaller or bigger it's out of position.


tried <div align=right> in webpage and in css.

thanks for any suggestions

 

Try swopping the top two round, ive had a problem of this nature before.

 

tried that too.
also the "center col" is the body content.

you're right though it should be a simple solution

 

I see the problem. The divs have a class of "slot" and ids or either "right" "left" or "center" Well the simple answer is: You didn't define the classes right, left and center.

I suggest this for a quick fix:

CSS code:

div.left {float:left;}
div.right{float:right;}
div.center{float:left;}

html code:

<div class="left"> some content</div>
<div class="center"> some content</div>
<div class="right"> some content</div>

or this:

css:
#left {float:left;}
#right{float:right;}
#center{float:left;}

html:
<div id="left"> some content</div>
<div id="center"> some content</div>
<div id="right"> some content</div>

 

You should use quotes around all of your attributes and not include spaces in CSS class names (and avoid starting them with numbers). As mentioned above: ".blah" = class of "blah" and "#lala" = id of "lala"

 

still no go..

I put in all quotes around all attributes...looked at each piece of code in css and html div's,no spaces no numebrs, chanegd ".div" to "#div"..and same thing.
why it floats left instead of right is beyond me.

this page code has beaten me into submission, too bad it's not a UFC website.

 

Can't you link to your page?

 

Not an expert with CSS but why not just have them all float left then add a width. I think css allows % in the width. just make right and left 18% and the center 60%. I never float right for some reason.

#left{
	margin: 4px 4px 4px 4px;
	padding: 2px;
	border: 1px solid #000000;
	width: 277px;
        float:left;
	}
#center{
	margin: 4px 4px 4px 4px;
	padding: 2px;
	border: 1px solid #000000;
	width: 277px;
        float:left;
	}
#right{
	margin: 4px 4px 4px 4px;
	padding: 2px;
	border: 1px solid #000000;
	width: 178px;
        float:left;
	}

Code (markup):

then the html

<DIV id="left">Text</DIV>
<DIV id="center">Text</DIV>
<DIV id="right">Text</DIV>

Code (markup):

displays

|   L    |   C   | R |

Code (markup):

Hope this helps, if not, hey i tried.

 

tried that too.

for some reason the cenetr ( body content) then floats left, but under the "left" content and the right content (column floats left in the center columns place.

 

I have tested this, my code works.

Attached is a example. Its just my code in a html page.

It works in Firefox and IE so i dont know what you mean buy still no go.

Attach the full code you are working on, its probably somewhere else in your code that is causing the problem.

 

Did you try displaying them inline?