469,291 Members | 1,802 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,291 developers. It's quick & easy.

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

Jun 25 '07 #1
6 5504
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.

Jun 26 '07 #2
Ira Gladnick wrote:
>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...ft-column.html

--
-bts
-Motorcycles defy gravity; cars just suck
Jun 26 '07 #3
In article
<11**********************@d30g2000prg.googlegroups .com>,
Ira Gladnick <Ir*********@yahoo.comwrote:
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>

--
dorayme
Jun 26 '07 #4
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.

Jun 26 '07 #5
In article
<11**********************@i38g2000prf.googlegroups .com>,
Ira Gladnick <Ir*********@yahoo.comwrote:
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.
That is the magic of tables.

--
dorayme
Jun 26 '07 #6
Ira Gladnick wrote:
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.
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...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 26 '07 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Drue | last post: by
10 posts views Thread by Jesper Rønn-Jensen | last post: by
1 post views Thread by books1999 | last post: by
1 post views Thread by calebih | last post: by
1 post views Thread by gatorade | last post: by
reply views Thread by Ira Gladnick | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.