# publicDerOperator/PositionIsEverything

### Subversion checkout URL

You can clone with HTTPS or Subversion.

Fetching contributors…

Cannot retrieve contributors at this time

executable file 241 lines (200 sloc) 9.117 kb
 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 ` The Float Model Problem

The
Float Model
Problem

Moz/N7 and Opera 6/7.1, Windows

Internet Explorer 5.5, Windows
(shows box model size difference
and 3px bug-space)

Internet Explorer 6, Windows
(shows 3px bug-space)

Internet Explorer 5, Mac
(shows IE5/mac float/div bug)

Opera 7.0, Windows

Float model? What's that?

Okay, here is a simple test concerning how static elements interact with floats. According to the W3C specifications,when a floated element is directly followed by a static element (one that is normally flowed), then first,the float will be displayed against the left edge of the containing element (in this case the 'body' element),and then the static element will also display against that same edge, and at the same vertical height as the float.

The float should overlay the static element, unless the static element has a left margin thatmoves it out to the right, and out from behind the float. The static element might also be 'cleared' (clear:left or clear:both), which would put it below the level of the float.

Details of the test

The green bordered box (div#left) is floated left in the 'body', and is followed by div#static (purple box).If div#static had no width, then all modern browsers would display correctly, with the purple box overlaid by the green bordered box.

But, because div#static is width defined, browser variance is fully evident. That 'width' declaration makes Internet Explorer put div#staticalongside the float as tho the float were part of the left body edge.Moz/N7 and Op6/7.1 do it accordingto the specs, with both boxes firmly pinned to the left body edge.

Why this matters

Making sophisticated use of float layouts sometimes requires stating the 'widths' on some boxes, butdoing so to a static box that follows a float makes IE display differently than any browser that daresto adhere to the standards. So differently in fact, as to make the situation impossible to ignore. (unless onehappens to be *you know who*)

So the choice is to code only for IE, knowing the minority browsers will break, or avoid using the 'width'declaration in many cases, putting many types of layouts 'off limits'. Some choice.

IE6 is not IE5.5

The demo you see here is fully pixel defined, but usually a layout has the widths in percentages, at least for theelements following the float. When div#static is given a percentage width, IE5.5 looks at the available horizontal space alongside the float and says "That is now defined as 100% of the width". So if div#static gets 'width: 50%;', that div is half as wide as the space next to the float and starts next to the float as mentioned.

However, IE6 is different. Yes IE6 does start the div next to the float, but it does not take the float into consideration when figuring the width of div#static. Rather it uses the entire container as the 100% widthrefrence, just as the specs require. Yet it does start the div alongside the float! So the problem is onlyhalf-fixed in IE6, creating one more headache for us poor coders.

What does this mean? Well, if the div is given a width of 100%, it is as wide as the body element, and being placed next to the float it forces the right edge of the body element sideways by the width of the float, causing a scrollbar. But only in IE6! As if this mess weren't already bad enough. Oy.

Close call in Norway

There was recently a disturbing turn of events. Opera7, (released Jan-2003) was doing just what IE does; putting div#static next to the float, rather than having div#static ignore thefloat and start at the left viewport edge, as was done in Op6.

This seemed to be a 'cave-in' on the part of the Opera decision makers, to take the 'easy path', ratherthan stick to the specifications. Microsoft is indeed very influential, and apparently the floatspecifications were fast becoming a dead letter.

Happily Opera 7.1 (released April-2003) properly obeys the float specification. Whew!

Last thoughts

I am no purist, and could happily live with a specification designed by Microsoft, but to have MSpublicly support the specs while silently flouting them really burns my toast. Is this how the future is made?

It's past time that these issues were aired out. Gentle reader, if you know any way of 'getting to' themovers and shakers at Microsoft, won't you please try and shake loose some kind of information regarding future plans? I dread having to tell the next newbie that the simple, straightfoward CSS standards can't simply be used 'as is', because the majority browser maker refuses to conform as it supposedly has agreed to do. This situation has got to end sometime; why can't it be now?