 |
 | 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 / June 2007Firefox div float question
The following displays as expected in IE7 (div2 floats to the right of div1). But in Firefox, div2 appears below div1. Why exactly does this happen in Firefox, and how to make it work as expected? <body style="width:400px"> <div id="div1" style="float:left"> div 1 stuff </div> <div id="div2" style="float:left; margin-left:2em"> div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff </div> </body> This can be viewed at <a href="http://www.clas.ucsb.edu/ Firefoxdiv.html">www.clas.ucsb.edu/Firefoxdiv.html</a> > The following displays as expected in IE7 (div2 floats to the right of > div1). But in Firefox, div2 appears below div1. > > Why exactly does this happen in Firefox, and how to make it work as > expected? <snip what appears to be HTML> > This can be viewed at <a href="http://www.clas.ucsb.edu/ > Firefoxdiv.html">www.clas.ucsb.edu/Firefoxdiv.html</a> You need to write a complete page first... <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title here</title> </head> <body> ... etc. </body> </html> Then validate it. http://validator.w3.org/ Also try increasing div2's left margin to something practical: margin-left: 12em; [Other readers, yes, I know...]  Signature-bts -Motorcycles defy gravity; cars just suck > You need to write a complete page first... Done (see http://www.clas.ucsb.edu/Firefoxdiv.html ) Still shows pretty much the same thing. div2 appears to the left of div1 in IE 7.0, but below div1 in Firefox 2. In article <1182829948.292871.267220@d30g2000prg.googlegroups.com>, > > You need to write a complete page first... > > Done (see http://www.clas.ucsb.edu/Firefoxdiv.html ) > > Still shows pretty much the same thing. div2 appears to the left of > div1 in IE 7.0, but below div1 in Firefox 2. Try this and alter the widths and margins to your requirements: <div id="div1" style="float: left; width: 7em">div 1 stuff</div> <div id="div2" style="margin-left:8em"> div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff div 2 stuff </div> Signaturedorayme dorayme, Interesting about the width thing. I'm seeing that if I use a table layout instead of floating divs, I am able to easily get the desired result in Firefox (text that is currently in div2 positioned to the right of the text currently in div1, rather than below) without needing to specify either fixed or percentage widths (which may not be practical or desirable for dynamic content) for either the table or the contained cells. The tables are dead. Long live the tables. In article <1182836601.849744.179650@i38g2000prf.googlegroups.com>, > dorayme, > [quoted text clipped - 8 lines] > > The tables are dead. Long live the tables. That is the magic of tables. Signaturedorayme > dorayme, > [quoted text clipped - 8 lines] > > The tables are dead. Long live the tables. Floats give you flexibility in your layout, but your do have to have some understanding of how they work. A little study can payoff. One could say tables makes it easy for those without a clue, but then again debugging a table layout gone wrong with nested tables and row and column spans can challenge the experts... SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com >> You need to write a complete page first... > > Done (see http://www.clas.ucsb.edu/Firefoxdiv.html ) > > Still shows pretty much the same thing. div2 appears to the left of > div1 in IE 7.0, but below div1 in Firefox 2. You didn't change: <div id="div2" style="float:left; margin-left:2em"> to something suitable, as I mentioned. With a floating margin only 2em from the "wall", what would you expect? <div id="div2" style="float:left; margin-left:12em"> or maybe <div id="div2" style="float:left; margin-left:20em"> It would also help to know what you hope to accomplish. This little snippet page gives no clue to that. Are you looking for a two-column template? Such as: http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html Signature-bts -Motorcycles defy gravity; cars just suck |
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.