Float{} tag no longer responds

[tha_Gsheep]

Hey there, for some reason the float tag is not responding when
put into this hierarchy.

Right, this is the page :
http://www.westclub.co.uk/newsite/css/notreall.html
and if you scroll down you'll see that an image interupts
the flow of text even though itis assigned style="float: left;"
on line 73 of the source.

Now I know that it has something to do with this DIV:
#Main {
position: absolute;
top: 188px;
width: 150px;
left: 47px;
}
,that you can find on line 70 of the style sheet(www.westclub.co.uk/newsite/css/main.css)
This is the DIV that contains the text for the articles and such
but I just don't see whyit interferes with Float.

P.s. Sorry about my sloppy development code.
PP.s If you use any other browser apart from explorer the nav bar will
act up, I know but thats not really an issue just now as 99.9 of the
visitors use explorer.

Cheers.

 

[deadserious]

I think it has to something to do with you setting margins on this div:

#explanation, #participation, #benefits, #requirements {
margin: 25px 0 0 176px;
width: 529px;
}

If you remove the margins it will probably float left. :D I don't know, maybe make a separate div for that part of your page?

 

[tha_Gsheep]

Nope that dosen't seem to effect anything related. Humph.
I've tried putting some extra DIVs on top of that one but that #Main one seems to be restraining it somehow. I've got this posted on four forums and everyones stumped.

 

[deadserious]

Try removing that entire part of your css and I'll bet you it will float left.

Remove all of this code:
#explanation, #participation, #benefits, #requirements {
margin: 25px 0 0 176px;
width: 529px;
}

EDIT: Actually I just took a closer look at your code and that would cause the image and the text to float to the left lol. I don't know, but you sure have alot of nested divs in there though. :D

 

[tha_Gsheep]

Crazy, turns out that this layer that encapsulates it is the problem:

#Main {
position: absolute;
top: 188px;
width: 150px;
left: 47px;
}

The position: absolute was conflicting with the float{} in a nested layer. So I just made it realtive to the page header.

 

[IndigoPixel]

It's because you have an absolutely positioned element. position:absolute; and float: don't play well together ...