Float issues

J

Jonathan N. Little

Kabuki said:
Thought I had floats figured out, then this happens:

http://members.shaw.ca/laplanteco/test/index.htm

In IE7, this does what I would expect. In FF2 though, well. . . take a
look for yourself.

In a similar vein, look at this:

http://members.shaw.ca/laplanteco/test/index.htm

Again, IE7 does it right, but I get this additional padding thing
happening under FF2.
Click to expand...

No, IE7 does it wrong. All other browsers, including Opera wrap the
block in normal flow, "ex2", around the floated block, just as it is
supposed to do.

To do what you wish, float ex2.

div.ex2 { float: left; }
 
E

Els

Kabuki said:
Oops. . .

http://members.shaw.ca/laplanteco/test/index2.htm
Click to expand...

Okay, copy pasting from your earlier message (next time please make
sure that each message by itself makes sense too):
Again, IE7 does it right, but I get this additional padding thing happening under FF2.
Click to expand...

There is no additional padding. What you see is the top margin of the
first paragraph. (That is, if you are referring to the bit of yellow
background above the top.jpg image in the paragraph's background).
 
K

Kabuki Armadillo

No, IE7 does it wrong. All other browsers, including Opera wrap the
block in normal flow, "ex2", around the floated block, just as it is
supposed to do.
Click to expand...

Why though? If p and div are block level elements, shouldn't they behave as
per IE?
To do what you wish, float ex2.
Click to expand...
div.ex2 { float: left; }
Click to expand...

If I float ex2 left too (works yes but seems counterintuitive), I get the
problem in FF2 similar to this page:

http://members.shaw.ca/laplanteco/test/index2.htm

i.e. extra padding on the top of the div, above the image.

KA
 
K

Kabuki Armadillo

There is no additional padding. What you see is the top margin of the
first paragraph. (That is, if you are referring to the bit of yellow
background above the top.jpg image in the paragraph's background).
Click to expand...

Man, I'm losing it. . .

I swear I set the margin to that para this morning and it wasn't having an
effect on my local version. Tried it again and seems to be working though.
Cache not cleared, no refresh, who the hell knows. . .

One problem solved.

Thx

KA
 
K

Kabuki Armadillo

Jonathan N. Little said:
No, IE7 does it wrong. All other browsers, including Opera wrap the block
in normal flow, "ex2", around the floated block, just as it is supposed to
do.

To do what you wish, float ex2.

div.ex2 { float: left; }
Click to expand...

Experimenting more, I bumped up the first para to a div instead. Now I'm
looking at comparable block elements and I get behaviour that's closer to
what I expect, except that now FF is the one behaving "correctly" and IE
isn't.

http://members.shaw.ca/laplanteco/test/index3.htm

Why isn't IE wrapping underneath the left-floated div?

KA
 
J

Jonathan N. Little

Kabuki said:
Why though? If p and div are block level elements, shouldn't they behave
as per IE?
Click to expand...


No, IE is alone and wrong on this. DIV and P are both block elements
and should flow around a flow if in normal flow. Consider a small
pull-quote and a long paragraph...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Proper Float</title>

<style type="text/css">
.pullquote {
margin: 0 .5em 0 0; padding: .5em; float: left;
font: large sans-serif; color: #500; background: #eee;
}
.pullquote:before { content: open-quote; }
.pullquote:after { content: close-quote; }
</style>
</head>
<body>
<div class="pullquote">
Just a small pull quote...
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo
volutpat augue. Morbi hendrerit, lorem vel iaculis congue, orci est
vehicula mi, scelerisque hendrerit urna leo tempus justo. Integer
lacinia, dolor id lacinia pulvinar, lacus odio tempus mauris, sit
amet porta eros justo id mauris. Nam dolor erat, cursus non,
fringilla commodo, convallis scelerisque, massa. Duis ac ligula.
Nulla aliquet. Vivamus porttitor ligula dictum elit. Ut sagittis
pede non lectus. Ut interdum eleifend felis. Donec erat lectus,
venenatis at, accumsan non, eleifend ac, nibh. Praesent hendrerit
tempor eros. In vulputate fringilla felis.
</p>

</body>
</html>


Should look like

+------------+ +----------------+
| pull quote | | para.......... |
+------------+ | .............. |
+---------------+ .............. |
| .............................. |
| .............................. |
| .............................. |
+--------------------------------+


And not like this:

+------------+ +----------------+
| pull quote | | para.......... |
+------------+ | .............. |
| .............. |
| .............. |
| .............. |
| .............. |
+----------------+
If I float ex2 left too (works yes but seems counterintuitive), I get
the problem in FF2 similar to this page:
Click to expand...

No, now ex2 is not in normal flow, but floated
http://members.shaw.ca/laplanteco/test/index2.htm

i.e. extra padding on the top of the div, above the image.
Click to expand...

Not sure what that proves
 
K

Kabuki Armadillo

Jonathan N. Little said:
Kabuki Armadillo wrote:


No, IE is alone and wrong on this. DIV and P are both block elements and
should flow around a flow if in normal flow.
Click to expand...

Sorry. I had another look and realized what you meant wrt to IE. I stand
corrected and enlightened wrt IE.

However. . .

In FF, my non-floated element (div) consists of:

-- outer div --
image
inner div text
image
-- outer div --


What I'm seeing is:

image
floated left para
inner div text
image

I'm confused about why the image in the non-floated element is appearing
above the floated element.

I think I should see something like:

image
floated left para some inner div text
more inner div text
image


The original reference again:

http://members.shaw.ca/laplanteco/test/index.htm


M



Consider a small
 
J

Jonathan N. Little

Kabuki said:
Sorry. I had another look and realized what you meant wrt to IE. I stand
corrected and enlightened wrt IE.

However. . .

In FF, my non-floated element (div) consists of:

-- outer div --
image
inner div text
image
-- outer div --


What I'm seeing is:

image
floated left para
inner div text
image

I'm confused about why the image in the non-floated element is appearing
above the floated element.
Click to expand...


Because the upper left is where the start of the block in normal flow
"div.ex2" starts and then the floated P displaces
I think I should see something like:

image
floated left para some inner div text
more inner div text
image
Click to expand...

Only if float's width < non-floated block's width.
The original reference again:

http://members.shaw.ca/laplanteco/test/index.htm


M
Click to expand...

make floated P's background green and see. Also then make floated P's
width 100px and div.ex2 width greater than 100, say 300px and see what
happens.

With my pull quote example the paragraph in normal flow origin is at
POINT A and not POINT B. It is just being pushed over by the pull quote.
you can confirm this bay adding a background color to the normal flow P
and will see that it extends UNDER the pull quote


[A]
| |

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Proper Float</title>

<style type="text/css">
.pullquote {
margin: 0 .5em 0 0; padding: .5em; float: left;
font: large sans-serif; color: #500; border: 1px solid #f00;
}
.pullquote:before { content: open-quote; }
.pullquote:after { content: close-quote; }
p { background: #ffd; }
</style>
</head>
<body>
<div class="pullquote">
Just a small<br>pull quote...
</div>
<div style="width: 30em;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo
volutpat augue. Morbi hendrerit, lorem vel iaculis congue, orci est
vehicula mi, scelerisque hendrerit urna leo tempus justo. Integer
lacinia, dolor id lacinia pulvinar, lacus odio tempus mauris, sit
amet porta eros justo id mauris. Nam dolor erat, cursus non,
fringilla commodo, convallis scelerisque, massa. Duis ac ligula.
Nulla aliquet. Vivamus porttitor ligula dictum elit. Ut sagittis
pede non lectus. Ut interdum eleifend felis. Donec erat lectus,
venenatis at, accumsan non, eleifend ac, nibh. Praesent hendrerit
tempor eros. In vulputate fringilla felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo
volutpat augue. Morbi hendrerit, lorem vel iaculis congue, orci est
vehicula mi, scelerisque hendrerit urna leo tempus justo. Integer
lacinia, dolor id lacinia pulvinar, lacus odio tempus mauris, sit
amet porta eros justo id mauris. Nam dolor erat, cursus non,
fringilla commodo, convallis scelerisque, massa. Duis ac ligula.
Nulla aliquet. Vivamus porttitor ligula dictum elit. Ut sagittis
pede non lectus. Ut interdum eleifend felis. Donec erat lectus,
venenatis at, accumsan non, eleifend ac, nibh. Praesent hendrerit
tempor eros. In vulputate fringilla felis.
</p>
</div>
</body>
</html>
 
K

Kabuki Armadillo

Jonathan N. Little said:
Kabuki Armadillo wrote:


Because the upper left is where the start of the block in normal flow
"div.ex2" starts and then the floated P displaces
Click to expand...

As you say, the start point is upper-left, point A. I get that.

If I remove the image, the text of the non-floated DIV shifts to the right
as you point out in your own example below. I get that.

But -- and I'm thick about this perhaps -- why doesn't the BACKGROUND IMAGE
move over as well? Why doesn't it shift to the right with the same paragraph
it is part of?

That's the part that's throwing me. The background image of the first
paragraph of the unfloated div slips "up and over" the float and I can't
figure out why. Why is it not being displaced as the text of the paragraph
itself?

Hope that makes sense. Sorry to be so dense about this.:(

If it helps, I put up the file again, but I coloured the different block
elements to make them easier to identify.

http://members.shaw.ca/laplanteco/test/index.htm


KA
 
J

Jonathan N. Little

Kabuki said:
But -- and I'm thick about this perhaps -- why doesn't the BACKGROUND
IMAGE move over as well? Why doesn't it shift to the right with the same
paragraph it is part of?
Click to expand...

Because the background-image starts at the upper-left hand corner of the
*rectangle* of the block in normal flow. Just the text, the content,
gets displaced by the float. Background images as well as background
colors are *not* content so it does not get displace be the float.
That's the part that's throwing me. The background image of the first
paragraph of the unfloated div slips "up and over" the float and I can't
figure out why. Why is it not being displaced as the text of the
paragraph itself?

Hope that makes sense. Sorry to be so dense about this.:(
Click to expand...

No it a little confusing until you realize that the block in normal flow
remains a rectangle and *not* L-shaped area, only the content get
displace. That is way my last example shows the rectangle with the P
background color, and the float red border that overlays it.
If it helps, I put up the file again, but I coloured the different block
elements to make them easier to identify.

http://members.shaw.ca/laplanteco/test/index.htm


KA
Click to expand...
 
K

Kabuki Armadillo

Jonathan N. Little said:
Background images as well as background colors are *not* content so it
does not get displace be the float.
Click to expand...

As the Greek guy said. . . Eureka!

No it a little confusing until you realize that the block in normal flow
remains a rectangle and *not* L-shaped area, only the content get
displace.
Click to expand...

Now I get it. I never gave it that much thought but it clears up this
dilemma for me.

Thx for your patience. . .

KA
 
J

Jonathan N. Little

Kabuki said:
As the Greek guy said. . . Eureka!



Now I get it. I never gave it that much thought but it clears up this
dilemma for me.
Click to expand...

Well in your defense it is not immediately obvious until you realize
what is content and what is not. Also margins with floats can get
tricky. Floats and absolute and relative positioned elements can be
problematic, it also does not help that IE get it wrong often. So as
general advice, especially if you are new at it is to limit their use.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

float problem, on of two boxes is being pushed down when openingfavoritesIE/or left bar in Opera 0
float problem, second of two boxes is being pushed down when openingfavoritesIE/or left bar in Opera 23
Issues with `codecs.register` and `codecs.CodecInfo` objects 2
Random datagrid issues 1
Microsoft and IE9 New Features 33
Force DIVs to NOT wrap if they don't fit browser width? 22
force web root into https; redirect issues 2
Conditional Comment Query 3

Members online

Total: 297 (members: 2, guests: 295)
Robots: 503

Forum statistics

Threads
474,104
Messages
2,570,643
Members
47,247
Latest member
youngcoin

Latest Threads

Top