position: relative percentages do not work on floats

VERIFIED INVALID

Status

()

Core
Layout: R & A Pos
VERIFIED INVALID
13 years ago
13 years ago

People

(Reporter: Mrten, Unassigned)

Tracking

({regression})

Trunk
x86
Windows XP
regression
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

13 years ago
in the URL above, the wrap2 left-float has a relative left position of -50%. it
used to move the image to the center of the page (owning to the fact that the
wrap1 class has |width: 0|, and |margin: 0 auto|.

because it is a float, it should have (and does, see the red border) the width
of the enclosed <img>. because it is position: relative and left: -50%, it
should move 50% of that image-width to the left.

this regressed between 1.8a6 and 1.8b1.
(Reporter)

Comment 1

13 years ago
extra info: for my site, i originally used |margin-left: -50%|, which worked
better (no horizontal scrollbar). i changed it to just |left: -50%| for the
reduced testcase above.

plain IE6 fails spectacularly, but with dean edwards' IE7, it worked quite OK.

sorry for the extra spam.

Comment 2

13 years ago
left:-50% in a containing block that has a specified width:0 results in left:0.
Given the markup/styling the layout is correct.
http://www.w3.org/TR/CSS21/visuren.html#propdef-left

-> INVALID
Status: NEW → RESOLVED
Last Resolved: 13 years ago
Resolution: --- → INVALID

Comment 3

13 years ago
If you remove the wrap DIVs you could use something like this:
.polaroid {
   display: block;
   margin:  0 auto;
...
}
(Reporter)

Comment 4

13 years ago
The extra <div>s were needed for drop-shadows as in
http://www.alistapart.com/articles/onionskin/ . As i've given up on that, I
removed the <div>s and continued with something like your suggestion. Thanks, I
appreciate it!

For posterity; another option is to fix it with another enclosing div (sorry
hixie) like this:

.wrap2 
  float: left;
}

.wrap3 {
  position: relative;			
  left: -50%;
}

then wrap2 has the correct width for the -50% left relative positioning in
wrap3. I've updated the testcase. Again, thanks for your time, and sorry for
wasting it.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.