Webmaster Forum / HTML, CSS, Scripts / CSS / August 2007

I believe I do. It's called the border box model, an implementation
which differs between IE and other UAs.

Well, your doctype appears to avoid Quirks mode, which I would have
thought would avoid the problem. But there it is in IE, all because (I
making a bold claim here) of two pixels. You have

<div id="containerfx">
 <div id="container">
  <div id="contentcontainer">
   <div id="contentleft">floats next to div#contentright
   </div>
   <div id="contentright">floats next to div#contentleft
   </div>
  ...

and as CSS
#contentleft {
   float:left; width:239px; ... }
#contentright {
   float:left; width: 537px; border-left: 2px dotted #CCCCCC; }
#contentcontainer {
   width: 100%; margin-top: 10px; margin-bottom:0; }
#container {
  width: 778px; margin:auto; border: 2px solid #CCCCCC; }

with paddings and margins for the above otherwise 0.

#contentleft + #contentright next to each other are 776px, which ought
to fit into #container's 778px. It does in FF, which adds the border for
#container to its *outside*. But IE appears to be adding the border
(2+2=4, as you probably know ;-) ) to the *inside* (although I thought
this only happened in Quirks mode). 778 - 4 leaves 774px, too small for
both divs side by side. So #contentright drops down.

There could be something else adding in here which I don't see, but
that's my theory. Could just be the three-pixel shift (q.G.). You can
try adding two or three or five px to #contentright, or just don't give
it any particular width.

You see the trouble with pixel-perfact layouts...

Looks nice, Terry.

In article
<1188541695.516530.270740@x40g2000prg.googlegroups.com>,

In Safari, things break a bit at above average but not fanciful
text sizes, especially in the grey menu strip at the bottom of
the header. The words about us etc actually get to disappear. But
most people won't need to have text so big so perhaps not to
worry.