The output of this code looks pretty much identical in FF, Chrome and Safari on Windows. In IE7 it looks weird.
For all other browsers the frame div exactly wraps the canvas div even though there is a 24X24 div in the frame but outside the canvas. IE7 leaves extra space in the frame, above the canvas, for the "blue-box" div. Once floated I thought the space it would otherwise occupy would collapse. That's the behavior I see in the other browsers.
Is there some trick to getting IE7 to collapse the space like the other guys?
Edit: Just to give an idea to what this example is supposed to represent. It's supposed to represented an embedded widget. The "canvas" is where the content belongs. The "frame" is what the hosting site uses to control the appearance and the behavior between the widget and the rest of the page. The red-box and blue-box divs represent controls in the widget. The red-box is a control put there my the widget code. The blue-box represents a control added by the frame (perhaps a handle to allow the widget to be dragged around the page)
Here's the complete sample
<!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>CSS Positioning</title>
<style type="text/css">
#frame {
position: relative; /* so subelements can be positioned */
width: 400px; /* an arbitrary width */
border: 1px solid black; /* a border so you can see it */
}
#canvas {
position: relative; /* so subelements can be positioned */
width: 400px; /* an arbitrary width */
border: 1px solid black; /* a border so you can see it */
}
#blue-box{
position: relative; /* so I can position this element */
float: right; /* I want this element all the way to the right */
width: 24px; /* set size of eventual graphic replacement */
height: 24px;
}
#red-box{
position: relative; /* so I can position this element */
width: 24px; /* set size of eventual graphic replacement */
height: 24px;
}
</style>
</head>
<body>
<div id="frame">
<div id="blue-box">blue</div>
<div id="canvas">
<div id="red-box">red</div>
</div>
</div>
</body>
</html>
Extra example for Emily ====================================================
<!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>CSS Positioning</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#one {
background-color: red;
float: right;
}
#two {
background-color: blue;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="one">one</div>
<div id="two">two</div>
</body>
</html>