Question

I devised a layout based on this one (from here) – I made freely rearranging the divs possible for a bit of SEO. You can see what I did here (css).

As it is, my layout has one minor bug – in Opera, the viewport doesn’t expand to accommodate the footer (i.e. the scrollbar doesn’t appear if only the footer is out of view). Otherwise, it works flawlessly in Opera 11, Firefox 4 and IE 8. However, when I uploaded it to the site I’m making it for, (layout css), it turned out that the page looks broken in IE – the left column appears on top of the middle one, and the header doesn’t appear until I fiddle with the left column’s parameters in IE’s developer tools.

So, can anyone help me figure out what breaks the page? I know that this question is more suited for doctype.com, but I can’t login there for some reason.

However, I would prefer to have the divs in my HTML source in this order:

1. Content
2. Footer
3. Left column
4. Right column
5. Header

I do not need propositions for new layouts. I am trying to understand why this works in IE and this doesn’t.

Answer 1

When faced with a difficult engineering problem, be it programming, web design, or electronics, often the most successful method (for me at least) is the ‘outside-in’ method. One of the most difficult thinks about it is making yourself use it, since it’s “only a little tweak somewhere” that you’ll make and fix everything… When I spend a good while looking for that right tweak, I know I should change my approach.

So, starting from scratch, I rebuilt a copy of index.php, pasting bits from the broken original in order to figure out what breaks stuff. And, sure enough, it turned out that the culprit was… the DOCTYPE, something I never paid much attention to – since I only recently started working on webpages as part of my job, caring about compatibility, etc. I slapped a XHTML 1.0 Transitional doctype instead of the original HTML, and it worked like a charm.

Thanks to everyone who helped and especially to @Magnum for his effort.

(: