284139 - position: relative percentages do not work on floats

Status: VERIFIED INVALID

(Core :: Layout: Positioned, defect)

Description

[Mrten]

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.

Comment 1

[Mrten]

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

[Mats Palmgren (inactive)]

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

Comment 3

[Mats Palmgren (inactive)]

If you remove the wrap DIVs you could use something like this:
.polaroid {
   display: block;
   margin:  0 auto;
...
}

Comment 4

[Mrten]

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.