Html – IE CSS Float Problem

csshtml

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>

Best Solution

There could be a problem with the sizing on the "frame" and "canvas" divs. It looks like they are both the same size plus the size of border (which gets added to the total size of the element). Try not specifying a size for your "canvas" div, but give it a margin to space it properly with the "blue-box" div.

When in doubt, reset your elements by setting your margin/padding to 0 one questionable elements. Default spacing can occur between browsers if they are not defined.

Also, I don't believe "position:relative" is needed here.

Acorn

Related Question