css layout fails in ie, has minor bug in opera. help?_问答_开发者

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 does开发者_运维知识库n'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:

Content
Footer
Left column
Right column
Header

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

While A-List-Apart is one of my favorite sites, I've found that sometimes their suggested css is not always as cross-browser compatible as one might like it to be. The same layout can be found by Mathew James Taylor that is cross-browser compatible and requires no javascript to pull off. Get ready to wade hip-deep in css, though. This is the css template I use for most of my basic layouts now. I've found it to be extremely flexible once you have analyzed how all of the containers fit together.

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

Solution two for SEO:

  <div id=siteBox>
  <div id=center class=column>
    <h1>This is the main content.</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
  </div>
  <div id=header>This is the header.</div>
  <div id=left class=column>
    <h2>This is the left sidebar.</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
  </div>
  <div id=right class=column>
    <h2>This is the right sidebar.</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
  </div>
  <div id=footer>This is the footer.</div>
    </div>

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.