nestscape respecting floats

Shawn Modersohn · Apr 26, 2004

IE 6 displays this the way I want. Netscape7 doesn't seem to care that the
paragraph is floated to the left. Its as though it is positioned relative
to the window rather than the floated paragraph. It's my understanding that
by specifying position:relative, the container will appear as it normally
would in the flow of content. Basically, is this behaivor one of those
inherent inconsistencies or is my form bad? I assume IE is getting this
right and Nestscape wrong.

<body>
<p style="float:left;">here is a bunch of stuff, lets see where it goes</p>
<div id="Layer1" style="position:relative; border: 1px solid; left:80px;
top:0px; width:199px; height:480px; z-index:1"></div>
<div id="Layer2" style="position:relative; border: 1px solid; left:0px;
top:0px; width:520px; height:480px; z-index:2"></div>
</body>

Steve Pugh · Apr 26, 2004

Shawn Modersohn said:
IE 6 displays this the way I want. Netscape7 doesn't seem to care that the
paragraph is floated to the left. Its as though it is positioned relative
to the window rather than the floated paragraph. It's my understanding that
by specifying position:relative, the container will appear as it normally
would in the flow of content. Basically, is this behaivor one of those
inherent inconsistencies or is my form bad? I assume IE is getting this
right and Nestscape wrong.

Always a dangerous assumption.

<p style="float:left;">here is a bunch of stuff, lets see where it goes</p>
<div id="Layer1" style="position:relative; border: 1px solid; left:80px;
top:0px; width:199px; height:480px; z-index:1"></div>

Imagine this without any positioning.

<p style="float:left;">here is a bunch of stuff, lets see where it
goes</p>
<div style="border: 1px solid; width:199px; height:480px;"></div>

Where does the div go?
It goes right up at the left hand edge. Why? Because floated elements
don't cause the adjacent elements to move - the cause the content of
adjacent elements to be reflowed.

Try this to see what I mean:
<p style="float:left; background: yellow; width: 50px; height:
50px;"></p>
<div style="border: 1px solid black; width:199px; height:480px;">here
is a bunch of stuff, lets see where it goes here is a bunch of stuff,
lets see where it goes here is a bunch of stuff, lets see where it
goes </div>

IE gets this wrong. Mozilla/Netscape gets it right. Opera gets it
wrong in quirks mode and right in Standards mode.

It's a mess, so you need to think about what you want and see if you
can do it some other way (with different nesting of elements, or with
margins instead of positioning).

Steve

Shawn Modersohn · Apr 27, 2004

Steve Pugh said:
Always a dangerous assumption.

Imagine this without any positioning.

<p style="float:left;">here is a bunch of stuff, lets see where it
goes</p>
<div style="border: 1px solid; width:199px; height:480px;"></div>

Where does the div go?
It goes right up at the left hand edge. Why? Because floated elements
don't cause the adjacent elements to move - the cause the content of
adjacent elements to be reflowed.

Try this to see what I mean:
<p style="float:left; background: yellow; width: 50px; height:
50px;"></p>
<div style="border: 1px solid black; width:199px; height:480px;">here
is a bunch of stuff, lets see where it goes here is a bunch of stuff,
lets see where it goes here is a bunch of stuff, lets see where it
goes </div>

IE gets this wrong. Mozilla/Netscape gets it right. Opera gets it
wrong in quirks mode and right in Standards mode.

It's a mess, so you need to think about what you want and see if you
can do it some other way (with different nesting of elements, or with
margins instead of positioning).

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <[email protected]> <http://steve.pugh.net/>

I guess I assumed that since I declared a <div> relevant to another
element I was going to get a box beside the first block of content, just
like IE does. Taken in context with the purpose of a float, to flow
elements around, your explanation makes more sense I suppose. This was an
exercise in academics mostly. Academics aside, I am working on
http://webpages.charter.net/shawnmodersohn/tnttest.html . In Netscape, the
center div flows to the left of a shorter left div as I would now expect
while IE keeps the appearance of two distinct columns. I want everything
fluid for any type of display. I am new to html and I decided if I am going
to learn I will learn with the cutting edge in mind, distinguishing between
the purposes of html, css, and xml. The navigation bar will eventually have
hover effects but the links are all valid to the almost deployable table
formatted site. Any input is appreciated.

Help with Visual Lightbox: Scripts	2	May 3, 2023
Help with my responsive home page	2	Dec 14, 2022
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Need help with code on website (noob)	2	Jul 18, 2022
Having trouble centering contents of td ?	3	May 2, 2023
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
How to position the tooltip comment on these buttons?	9	Nov 4, 2023

nestscape respecting floats

Shawn Modersohn

Steve Pugh

Shawn Modersohn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads