Firefox div float question

Ira Gladnick

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

Subscribe Post Reply

5655

Ira Gladnick

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

Beauregard T. Shagnasty

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

dorayme

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

Ira Gladnick

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

dorayme

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

Jonathan N. Little

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

Similar topics

Floats, Firefox, and overflow

by: Drue | last post by:

Example page: http://www.splatteredink.net/test/ It is a two column layout with header. The header and two columns are in a container div. The left column is floated left. The text of the left...

HTML / CSS

Possible Firefox bug: float:right and tables

by: Jesper Rønn-Jensen | last post by:

Hope you can help me out on this one. I have a a box that is floated right. Below (in the normal float) I have a wide table. <body> <div style="float:right; width:200px">...</div> <p>This...

HTML / CSS

Firefox problem with overflow

by: books1999 | last post by:

Hi there, I have a problem with this css/div and i cannot work it out. I would like either container to be able to push the background box to grow but in Firefox it overflows. Can someone find a...

HTML / CSS

CSS Dropdown Menus: Firefox vs IE7 positioning

by: Mark | last post by:

I have developed a generic list-based css menu. It works both in IE7 and Firefox, and with the help of Peter Nederlof's csshover.htc, with older IE versions. I have included a simplified version...

HTML / CSS

Drop Down menu breaks layout in Firefox

by: calebih | last post by:

Here is the link in question: http://www.redchip.com/testing.asp It is simply styled with floating divs. Two floating divs are in a container, and they look fine, until I insert dropdown...

HTML / CSS

Drop Down list breaks layout in Firefox

by: gatorade | last post by:

Drop Down list in a form is breaking layout of the page in FireFox. Here is the page in question: http://www.redchip.com/visibility/RCinstitutional-Requestinfo.asp The layout is simply two...

HTML / CSS

Firefox div float question

by: Ira Gladnick | last post by:

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

HTML / CSS

IE6 not displaying text correctly - IE 7 & Firefox 3 are fine!

by: littlealex | last post by:

IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS! In IE6 the text for the following page doesn't display properly - rather than being...

HTML / CSS

VB.NET Browser Compatibility issues with IE and Firefox displaying menu correctly.

by: PianoMan64 | last post by:

Hey Experts, I'm not sure how to get around this, and any help would be most greatfull. I have an issue with having a CSS menu that displays correctly in IE and not correctly in Firefox 3.0.3,...

.NET Framework

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General