Layout suddenly broken

haven't done anything to the site in months, now right column at bottom

[KeithDouglas]

I have a website that uses CSS <div>s to position content in three columns left-center-right. It's worked fine in every browser I've looked at it with for over a year. Today I look at it with IE and the right column, instead of being on the right side of the screen, is either under the left or center column (varies by page, all pages use the same layout and same CSS file). I haven't changed a thing, not the HTML files nor the CSS file, in months. What could cause this?

[Longhaired Genius]

The usual cause of this is that one of the columns is a bit too wide. Make sure the widths add up to 99% or less and you should be ok.

[KeithDouglas]

I did a quick fix by making the main frame <div> that holds everything else 10px wider — it had been 740px wide, now it's 750px.

But now that I look at it, the problem seems to be the left column. It has suddenly gotten wider. As if something in it suddenly has a 10 or 15px margin or padding.

[Lorel]

Is there a URl in that column? that could push it past the limits.

[KeithDouglas]

You mean, URL?

The column is full of URLs (navigation to other parts of the website).

What I don't get is that is looked great in IE for months, and I didn't change a single character in the HTML code or in the CSS file. Now, suddenly there's enough extra padding or margin to break the layout of the whole page. I just don't understand what happened.

[createErrorMsg]

looked great in IE for months

Did you (a) upgrade your version of IE, or (b) add a DOCTYPE declaration to the page?

What you describe is a box model problem. Either of the above could cause it. If you recently upgraded to IE6, and the page has a valid doctype, IE6 will operate in Standards mode, and will use the standards compliant box model to render pages. This will cause the total width of a box to equal it's width PLUS borders, padding and margins. A page can look fine in IE5.x (which uses the Quirks box model) but break in the way you describe when viewed with IE6.

If the page didn't have a doctype, but now does, you can experience a similar problem. Without the doctype, IE6 uses the Quirks box model and acts just like IE5.5 (padding and borders stuffed INSIDE the box width). Add a doctype and it switches over to Standards mode.

cEM

[Hester]

Italics can also push a column out, believe me. Only in IE of course. :)

[KeithDouglas]

Did you . . . add a DOCTYPE declaration to the page?

No. I made no changes in the CSS or HTML files at all. In fact, I hadn't even looked at the site for many days.

Did you . . . upgrade your version of IE . . .?

Not to my knowledge. I looked at my website pages both at home (where I haven't changed IE) and at work (where the LAN support folks install things on people's computers all the time) during a 12-hour period. Using IE both at both locations I saw the problem (left column too wide, with extra space around one of its elements, causing the layout to break). The problem didn't occur in Mozilla or Firefox.

Now here's the weird part:

As I stated above, I was able to make a temporary fix by making the "frame" div (which holds the three column div) wider. The extra padding around the elements in the left column was still there; but the wider frame was able to hold everything without the right column wrapping around under everything else.

But now, a day later, everything is back to normal. The extra space around the elements in the left column is gone.

I wonder if the extra padding could have been from a third-party. I have an Amazon Honor System donation box in that column. It consists of an image, etc., that is served up from Amazon's computers. Maybe the image they were putting out wasn't right somehow?

The rest of the column is all my code: text, links, and a gif image. I haven't changed it for months and it always worked great (on many computers: at home, work, the library, etc.) and never had a broken layout except for the half-day or so in question.