[SOLVED] Float left dosn't work in firefox

[otuatail]

Hi

 

This works ok in IE6 but not FF 3.5.3

Float left is not floating in FF

Desmond.

[otuatail]

Sorry Guys working late. Would help with a URL?

 

http://www.des-otoole.co.uk/reallife/PartnerUs.php

 

SORRY

[saltedm8]

checking it out ( was just saying to post a link hehe )

[otuatail]

YEP but we all make mistrakes when tired. saltedm8 never made a mistake !!!!

 

[saltedm8]

your coding is a bit of a mess, is there a reason you did not use a span class to make your text red ?.. or did you not realise you dont need to make another div when all you have to use is

 

<span class="red">this would be red</span>

 

then put

 

span .red { color:red; }

in your css ?

 

that is just one example... I think your issue is that what you really needed was a left div and a right one to separate them, and use margin to align them where you want.. like a 2 column layout.

[otuatail]

Yes but

1) this works in IE6

2) You dont need a float right.

3) http://www.des-otoole.co.uk/reallife/index.php works in both IE & FF

 

 

[saltedm8]

IE6 is a pain in the ass.. and I would not take any notice of how it is rendering your site unless the others are ok..

 

you have done well, but the content areas need to be 'contained' so it cannot move

[otuatail]

I had this guy who said tables suck. Divs are ACE. I could do this in a table. But if I wanted to do this in divs. Say for exmple I want a cube. 3 divs in a row and 3 rows of 3 divs.

 

Cant say float:left , float:middle, float:right

 

This is the problem but if it can't work in IE6 then that is OK with me but IE7+ and all versions of FF Opera and Safari that are reasonably recent.

 

 

[saltedm8]

to make a container with 3 columns

 

<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>

 

and the css might look something like this

 

#container { float: left; width:75px; height:100px;}
#left { float:left; width:25px; height:100px; }
#middle { float:left; width:25px; height:100px }
#right { float:right; width:25px; height:100px }

 

there are a couple of things you might notice...

 

I have set the height of each div to no more than the height of the container.

 

each div has 25px width, in total this is no more than the container ( in this case 75px ).

 

I have floated the middle one left, this is not always necessary but every now and then it can cause issues not to mention it, so I do anyway.

 

the containers closing div is the very last thing in the html, this is why its called a container, because its 'wrapping' the other divs, so we can position the container where we like and the other divs will follow.

 

if you wanted to add margin or padding to the divs inside the container, to move it, we have to reduce the size of the div or make the containing div larger to accommodate it, as margins and padding add length/height depending on where you have placed your margins or paddings

 

if we wanted to do another box exactly the same under it, we can change them from id's to classes, that way it wont be invalid and you can keep using the divs however often you like

 

follow these basic rules and you wont go far wrong,

[otuatail]

Thanks for your help. This all makes perfect sense.  Desmand