div shifting until page reload

Odd problem I just can't figure out. Allow me to describe it first before I provide a link, because the problem happens ONLY on the first time you view the page -- it corrects itself if you revisit/reload/refresh the page and then you never see the problem again (unless you delete all cookies and cache, etc.)

(One could say if that's the case, it's not a huge deal -- but if a new visit sees a messed-up page, they may not want to revisit!)

So, the page has a top-third that goes across the whole page. Then, the main section is divided into three div columns: a main center section bookended by two thinner columns.
When the page loads, the center div will shift down to start below where the side columns end! Then, when you reload the page, it'll pop up to where it should be on the same horizontal plane.

I've tried various combinations of CSS floats (and clearing floats), but nothing seems to fix it.

Here's the link:
http://www.girlscoutsmoheartland.org/pages/gs100th-expo.php

If I can get someone more experienced to say, "You have a problem with X, look to that," that'd be cool as it would give me direction and focus. Right now, I'm just scattershotting at what to look at/for.

Thanks for any suggestions and help!
Liam

Would it be possible to get a screenshot of what you're seeing? What Browser are you viewing it on?

I just loaded it Chrome, IE, Safari and FF and I noticed no shifts...

Same here - it loaded fine with no shifts.

I've been able to see it on Firefox 10, IE 9 and 8, and Chrome...whatever the current is. 17?
Now, this is just so weird. I was able to recreate the error on various browsers on three different PCs before I posted the problem, and now I can't recreate it again... yet I changed nothing!
Ugh, so frustrating. I need to become a gardener or something.

Using Firefox 7.0.1 on Linux loads fine no shift .

I can't see it either. But what you're describing is float drop as if the central column has insufficient space. Looking at your css, while #content has sufficient left margin to accommodate #leftnavexpo, it doesn't allow for the width of #rightnav plus its padding. You can see this clearly in Firebug.

Like I say, I can't recreate the problem, but you might try increasing the right-margin on #content.

I can't see it either. But what you're describing is float drop as if the central column has insufficient space. Looking at your css, while #content has sufficient left margin to accommodate #leftnavexpo, it doesn't allow for the width of #rightnav plus its padding. You can see this clearly in Firebug.

Like I say, I can't recreate the problem, but you might try increasing the right-margin on #content.

Oh ho, I see! (I need to learn how to use Firebug proficiently.) Thanks for the clue! I made some adjustments and, while I can't confirm it fixed anything, I think it's a design improvement in any case.
Thanks!!

Oh ho, I see! (I need to learn how to use Firebug proficiently.) Thanks for the clue! I made some adjustments and, while I can't confirm it fixed anything, I think it's a design improvement in any case.
Thanks!!

The layout tab on the right of firebug is great for debugging box model issues. Select an element on the page and the Layout tab will show its diminsions with margins, paddings, and borders. You can also adjust those right in the box model simulation and see it's effects.

The layout tab on the right of firebug is great for debugging box model issues. Select an element on the page and the Layout tab will show its diminsions with margins, paddings, and borders. You can also adjust those right in the box model simulation and see it's effects.

Fascinating! I'd never really looked at that before. (I need a continuing education class on Firebug.) Very useful! Thanks!! :)