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. 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.

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 ...