forked from DerOperator/PositionIsEverything
-
Notifications
You must be signed in to change notification settings - Fork 0
/
floatmodel.html
executable file
·241 lines (200 loc) · 8.9 KB
/
floatmodel.html
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Float Model Problem</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,position is everything,position,css,html,bug,bugs,bug fix" />
<meta name="description" content="A description of how different browsers treat float/non-float behavior." />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="SHORTCUT ICON" href="favicon.ico" />
<style>
<!--
html {margin: 20px 0 0 0; padding: 0; border: 0;}
body { margin: 20px 0 0 0; padding: 0; font: 80% verdana, sans-serif; background-color: #fec;}
p {margin: .4em .5em; padding-left: .5em; line-height: 1.2;}
h1 {background: #080; border: 4px solid #ed6; border-width: 4px 0; margin: 0 0 30px 0;
font-size: 1.8em; font-family: georgia, serif; padding: 10px 0 10px 40px; color: #ffa;}
h2 {font-weight: bold; font-size: 1.2em; margin: 1em 0 .5em}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
a {color: #000;}
span {font-weight: bold;}
ul {margin: 0 0 10px 0; padding: 0; list-style: none; text-align: right;}
li {margin: 0; padding: 0;}
li a {margin: 0 5px;}
#textcol {
position: absolute;
width: 57%;
top: 0;
right: 16px;
border: 2px solid #333;
border-width: 0 2px 2px;
padding: 10px;
background-color: #edb;
}
#screenshots {
padding: 25px 0 0 10px;
font-size: .9em;
}
#screenshots img {
margin: 5px 0 20px;
}
#float {
width: 14%; /*** A width is required for any float. ***/
height: 180px;
float: left;
border: 6px solid #3a3;
color: #060;
}
#static {
width: 16%; /*** This width triggers the non-standard behavior. ***/
height: 150px;
border: 4px solid #000;
color: #fff;
background-color: #d6d;
}
-->
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/init.js"></script>
</head>
<body>
<h1>The<br />Float Model<br />Problem</h1>
<div id="float"> </div>
<div id="static"> </div>
<div style="clear: both;"> </div>
<div id="screenshots">
<span>Moz/N7 and Opera 6/7.1, Windows</span><br />
<img src="images/floatmodel-op6-moz.gif" alt="" /><br />
<span>Internet Explorer 5.5, Windows<br />
(shows box model size difference<br />
and 3px <a href="explorer/threepxtest.html"
title=" IE bug closely related to this one ">bug-space</a>)</span><br />
<img src="images/floatmodel-IE5.5.gif" alt="" /><br />
<span>Internet Explorer 6, Windows<br />
(shows 3px bug-space)</span><br />
<img src="images/floatmodel-IE6.gif" alt="" /><br />
<span>Internet Explorer 5, Mac<br />
(shows IE5/mac <a href="http://www.l-c-n.com/IE5tests/float/index.shtml"
title=" Philippe Wittenbergh's excellent Mac site ">float/div bug</a>)</span><br />
<img src="images/floatmodel-IE5-mac.gif" alt="" /><br />
<span>Opera 7.0, Windows</span><br />
<img src="images/floatmodel-op7.gif" alt="" /><br />
</div>
<div id="textcol">
<ul>
<li><a href="index-2.html"><strong>Return to p.i.e.</strong></a></li>
<li><a href="ordered-floats.html#float-model"><strong>Return to Source Ordered Columns</strong></a></li>
</ul>
<h2>Float model? What's that?</h2>
<p>
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.
</p>
<p>
The float should overlay the static element, unless the static element has a left margin that
moves 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.
</p>
<h2>Details of the test</h2>
<p>
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.
</p>
<p>
But, because div#static is <span>width defined</span>, browser variance is fully evident.
That 'width' declaration makes <span>Internet Explorer</span> put div#static
alongside the float as tho the float were part of the left body edge.
<span>Moz/N7</span> and <span>Op6/7.1</span> do it according
to the specs, with both boxes firmly pinned to the left body edge.
</p>
<h2>Why this matters</h2>
<p>
Making sophisticated use of float layouts sometimes requires stating the 'widths' on some boxes, but
doing so to a static box that follows a float makes IE display differently than any browser that dares
to adhere to the standards. So differently in fact, as to make the situation impossible to ignore. (unless one
happens to be *you know who*)
</p>
<p>
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.
</p>
<h2>IE6 is not IE5.5</h2>
<p>
The demo you see here is fully pixel defined, but usually a layout has the widths in percentages, at least for the
elements 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.
</p>
<p>
However, IE6 is different. Yes IE6 does start the div next to the float, but it does <em>not</em> take the float
into consideration when figuring the width of div#static. Rather it uses the entire container as the 100% width
refrence, just as the specs require. Yet it <em>does</em> start the div alongside the float! So the problem is only
half-fixed in IE6, creating one more headache for us poor coders.
</p>
<p>
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.
<em>But only in IE6!</em> As if this mess weren't already bad enough. Oy.
</p>
<h2>Close call in Norway</h2>
<p>
There was recently a disturbing turn of events. <span>Opera7</span>, (released Jan-2003)
was doing just what IE does;
putting div#static next to the float, rather than having div#static ignore the
float and start at the left viewport edge, as was done in Op6.
</p>
<p>
This seemed to be a 'cave-in' on the part of the Opera decision makers, to take the 'easy path', rather
than stick to the specifications. Microsoft is indeed very influential, and apparently the float
specifications were fast becoming a dead letter.
</p>
<p>
Happily Opera 7.1 (released April-2003) properly obeys the float specification. Whew!
</p>
<p>
</p>
<h2>Last thoughts</h2>
<p>
I am no purist, and could happily live with a specification designed by Microsoft, but to have MS
publicly support the specs while silently flouting them really burns my toast. Is this how the future is made?
</p>
<p>
It's past time that these issues were aired out. Gentle reader, if you know any way of 'getting to' the
movers 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?
</p>
<br />
<p class="small alignright">
<a href="design/index.html"
title=" Holly 'n John's Tableless Design and Repair "><strong>Holly 'n John</strong></a>
<a href="https://github.com/DerOperator/PositionIsEverything/issues" title="If you've found something new and
interesting to say about any CSS subject, please contact me. I want to know! ">e-mail</a>
©positioniseverything<br />
Last updated: January 18, 2004<br />
Created January 28, 2003
</p>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-39235363-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>