Somebody please help me before I pull out all my hair and go bald.
My site: http://206.125.214.96/
NN issue: Main content div is below the navigation div as though it's too wide to float. But it's not! Why is it down there?
IE issue: Same as NN issue, PLUS why is the navigation div showing up on top of the header div?
I'm sure that the fix is something ridiculously simple that I cannot see because I've been playing with the files too much.
I know that css file is a monster, but it's nicely commented and all the page layout stuff is right at the top.
Thank you,
Bald and crazy
2 column fixed width layout
You need to create an element to contain all the content in your left column - at the moment, you don't have one. Then I'd do this:
#left-column { float: left; width: XXpx; } #main { margin-left: XXpx /* wider than #left-column; no width required */ }
2 column fixed width layout
The entire left column is included in the #navcontainer div. The one thing it was missing is the float: left; declaration, which I SWEAR was in there. I must have deleted that line accidentally.
Okay, so that fixes the floating problem, but I'm still have that layering issue in IE. I've tried changing the order of the #header div and #navcontainer divs in the HTML, but that didn't fix anything. I can't use z-index because they're not absolutely positioned divs. Any suggestions for getting the #navcontainer under the #header?
The weird thing is that I had all of this working just fine (for weeks! months, even!), and I didn't change the css file at all, and suddenly the layout broke. ? It's a mystery I suppose.
2 column fixed width layout
Okay, okay, I got it!
Gratuitous position: relative; attributes, then z-index.
Thanks for your help. It probably would have taken me hours to realize that I had deleted the float: left; line.