 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / November 2006Why wont Firefox recognise my float:left?
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 > 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 >> 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.  SignatureEls http://locusmeus.com/ accessible web design: http://locusoptimus.com/ Now playing: - Kristy Starling - As Long As We're Here > http://www.ainewmedia.co.uk/test.htm > [quoted text clipped - 3 lines] > 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. > > http://www.ainewmedia.co.uk/test.htm > > [quoted text clipped - 27 lines] > 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! >>> http://www.ainewmedia.co.uk/test.htm >>> [quoted text clipped - 33 lines] > > 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! |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.