Why wont Firefox recognise my float:left?

[john_aspinall]

http://www.ainewmedia.co.uk/test.htm

Im learning CSS based layout and Im pulling my hair out as to why wont
my banner DIV float to the right of my login box? It works fine in IE.

Any help will be greatly appreciated! Ive added coloured borders to
try help with whats going on.

Cheers...John

[Nik]

jo***********@y ahoo.co.uk wrote:

http://www.ainewmedia.co.uk/test.htm

Im learning CSS based layout and Im pulling my hair out as to why wont
my banner DIV float to the right of my login box? It works fine in IE.

It sits perfectly next to the login box on my FF2/Win.

Where in relation to the #navigation do you wish the #content to be? I
see it directly underneath.

Nik

[Els]

Nik wrote:

jo***********@y ahoo.co.uk wrote:

>http://www.ainewmedia.co.uk/test.htm

Im learning CSS based layout and Im pulling my hair out as to why wont
my banner DIV float to the right of my login box? It works fine in IE.

It sits perfectly next to the login box on my FF2/Win.

No, that's only part of the banner.
If you give the banner a left margin the width of the login box,
you'll see the full banner.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: - Kristy Starling - As Long As We're Here

[Harlan Messinger]

jo***********@y ahoo.co.uk wrote:

http://www.ainewmedia.co.uk/test.htm

Im learning CSS based layout and Im pulling my hair out as to why wont
my banner DIV float to the right of my login box? It works fine in IE.

Any help will be greatly appreciated! Ive added coloured borders to
try help with whats going on.

A subtle detail of floating is that *blocks* don't wrap around floating
elements that precede them, *inline* content does. As you can see, the
word "banner" floats perfectly well. But the block that contains it
begins over at the left margin, and that's the correct behavior, since a
block can only be rectangular.

This becomes obvious if you replace the word "banner" with enough text
to extend below the bottom of the login block. The text will wrap, and
you'll see that for the banner block containing the text to be
rectangular, its left side has to be over at the left margin. If the
banner block's left side were to the right of the Login block, then the
text inside it couldn't wrap underneath the login block!

You have two choices:

1. Since your login block is a fixed pixel size, you could alter your
background image by adding 145 pixels of padding on the left. That empty
part of the graphic would--hmm, I *think*--sit *under* the floating
login block.

2. You can give the banner block a 145 pixel left margin, though if you
do that and you actually have enough text in it to extend below the
bottom of the login block, it won't wrap underneath the login block.

[john_aspinall]

Harlan Messinger wrote:

jo***********@y ahoo.co.uk wrote:

http://www.ainewmedia.co.uk/test.htm

Im learning CSS based layout and Im pulling my hair out as to why wont
my banner DIV float to the right of my login box? It works fine in IE.

Any help will be greatly appreciated! Ive added coloured borders to
try help with whats going on.

A subtle detail of floating is that *blocks* don't wrap around floating
elements that precede them, *inline* content does. As you can see, the
word "banner" floats perfectly well. But the block that contains it
begins over at the left margin, and that's the correct behavior, since a
block can only be rectangular.

This becomes obvious if you replace the word "banner" with enough text
to extend below the bottom of the login block. The text will wrap, and
you'll see that for the banner block containing the text to be
rectangular, its left side has to be over at the left margin. If the
banner block's left side were to the right of the Login block, then the
text inside it couldn't wrap underneath the login block!

You have two choices:

1. Since your login block is a fixed pixel size, you could alter your
background image by adding 145 pixels of padding on the left. That empty
part of the graphic would--hmm, I *think*--sit *under* the floating
login block.

2. You can give the banner block a 145 pixel left margin, though if you
do that and you actually have enough text in it to extend below the
bottom of the login block, it won't wrap underneath the login block.

OK I see what your saying and Ive added some text to the DIVS below and
it gets the effect you said it would:

http://www.ainewmedia.co.uk/test.htm

Although it does wrap in Firefox, but not IE, why is this? Also, you
mentioned an 'inline' block will work, i.e. poistion its 'block' next
to the floating block to its left. How would I do this for the content
block on my page?

Cheers...John

PS - I joined the banner graphic to login background graphic and now
all sits in one block, not elegant but it works!

[Harlan Messinger]

jo***********@y ahoo.co.uk wrote:

Harlan Messinger wrote:

>jo***********@y ahoo.co.uk wrote:

>>http://www.ainewmedia.co.uk/test.htm

Im learning CSS based layout and Im pulling my hair out as to why wont
my banner DIV float to the right of my login box? It works fine in IE.

Any help will be greatly appreciated! Ive added coloured borders to
try help with whats going on.

A subtle detail of floating is that *blocks* don't wrap around floating
elements that precede them, *inline* content does. As you can see, the
word "banner" floats perfectly well. But the block that contains it
begins over at the left margin, and that's the correct behavior, since a
block can only be rectangular.

This becomes obvious if you replace the word "banner" with enough text
to extend below the bottom of the login block. The text will wrap, and
you'll see that for the banner block containing the text to be
rectangular, its left side has to be over at the left margin. If the
banner block's left side were to the right of the Login block, then the
text inside it couldn't wrap underneath the login block!

You have two choices:

1. Since your login block is a fixed pixel size, you could alter your
background image by adding 145 pixels of padding on the left. That empty
part of the graphic would--hmm, I *think*--sit *under* the floating
login block.

2. You can give the banner block a 145 pixel left margin, though if you
do that and you actually have enough text in it to extend below the
bottom of the login block, it won't wrap underneath the login block.

OK I see what your saying and Ive added some text to the DIVS below and
it gets the effect you said it would:

http://www.ainewmedia.co.uk/test.htm

Although it does wrap in Firefox, but not IE, why is this?

Because IE is wrong. I don't have IE7 yet--I wonder if this has been fixed.

I think you can solve the problem by putting the login block just inside
the banner block, even though that doesn't make sense in terms of the
page's structure.

Also, you
mentioned an 'inline' block will work, i.e. poistion its 'block' next
to the floating block to its left. How would I do this for the content
block on my page?

It *is* doing it. The text inside the block is inline content. The
text--the inline content--is wrapping (at least, in Firefox it is).

>
Cheers...John

PS - I joined the banner graphic to login background graphic and now
all sits in one block, not elegant but it works!