Fog Creek Software
Discussion Board




Knowledge Base
Documentation
Terry's Tips
Darren's Tips

Simple (I hope) CSS question

Here is some basic HTML:

<html>
<head>
  <style type="text/css">
    .bigcontainer
    {
    border:1px solid black;
    padding:10px;
    }
    .smallcontainer
    {
    border:1px solid red;
    }
  </style>
</head>
<body>
<div class="bigcontainer">
  This is the big one
  <div class="smallcontainer" style="float:left;">
  This is the first small one
  </div>
  <div class="smallcontainer" style="float:right;">
  This is the second small one.
  </div>
</div>
</body>
</html>

Why does it render having the 2 smallcontainer's outside of the border of the bigcontainer?


Thanks

Charles Reich
Tuesday, June 17, 2003

That is weird. Opera renders it correctly, and in IE if you put a couple BR tags after the second small div, but before the close-tag of the outer div, IE will float the inner divs inside the outer div, though it still doesn't float them correctly. It looks like IE is ignoring the floating elements when it draws the bottom border of the outer div.

Reading the spec, if I underestand it (and it seems pretty clear in 4.1.4 "Floating Elements", http://www.w3.org/TR/REC-CSS1#floating-elements ), it looks like Opera is doing it right and IE is wrong.

Troy King
Tuesday, June 17, 2003

Thanks Troy.  I just tried it in Mozilla and had even a different effect.  Now the bottom border cuts through the two smaller divs.

Also, I tried putting in just on <br /> before the outer closing div and that didn't seem to change anything.  However, 2 <br />'s did get it to work.

Very strange.

Charles Reich
Tuesday, June 17, 2003

I think you should check the spec for how the width values default. You may have to specify an explicit width somewhere up the hierarchy in order to get the behavior you are looking for. I don't think even a percentage width value will work.

Eric Meyer's CSS Programmer's Reference is an excellent and concise source of info on this kind of thing.

In general, I tend to go with what Mozilla does as a bench mark for "correctness" even if it is not perfect, it is less imperfect than most of the others. Opera version 7 has made great strides, however.

ed nixon
Tuesday, June 17, 2003

There is a list serve run by Eric Meyer all about css issues.  First, though, validate your html and css.  Sometimes something is funny in the code, but the browser compensates in some odd way.

Check out the css discussion at
http://www.css-discuss.org/mailman/listinfo/css-d

Joel Goldstick
Wednesday, June 18, 2003

Ed,

Thanks for the suggestion.  I tried putting both of the following in the html:
1) <div class="bigcontainer" style="width:70%;"> and
2) <div class="bigcontainer" style="width:500px;">

They both 'worked' in the sense that the black box now contained the smaller red boxes.  I will look at Eric Meyer's Programmer reference to see if I can understand this behavior.

Charles Reich
Wednesday, June 18, 2003

*  Recent Topics

*  Fog Creek Home