Hey folks, I'm trying to figure out what the proper behavior is for the
following simple example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html>
<head>
<title>Yo</title>
<style>
#elone { width: 20%; float: left; background: green; }
#eltwo { width: 20%; float: left; clear: left; background: red;
}
#elthree { width: 80%; float: left; background: orange; }
#elfour { width: 80%; float: left; background: blue; }
</style>
</head>
<body>
<div id="elone">1</div>
<div id="eltwo">2</div>
<div id="elthree">3</div>
<div id="elfour">4</div>
</body>
</html>
IE 6 Win allows #elthree to set the position it's top outer edge to the
top outer edge of #elone. Firefox Win only allows #elthree to set the
position of its top outer edge to the top outer edge of #eltwo--the
clear: left in #eltwo constraining the flow of the following floaters.
Relevant W3C specs ( http://www.w3.org/TR/CSS21/visuren.html#float-rules
or http://www.w3.org/TR/CSS21/visuren.html#propdef-clear ) don't make
the proper behavior clear to me. If anything, they suggest that IE Win
6's rendering is correct ("A floating box must be placed as high as
possible.")
Jared Stein
Director of Instructional Design Services
Utah Valley State College, MS 149
http://www.uvsc.edu/disted/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
