So - I'm working on developing a new theme for WordPress, however I'm having some difficulties. The theme is basically done, but it really urks me that the wrapper in the background loads last.

Basically, the page looks like this when it's loading:

http://i.imgur.com/JdynG.png

Then like this when it's done:

http://i.imgur.com/YTfjj.png

Take in mind all the rectangles in the images represent content, besides the background. The square on the right would be the sidebar, but that's what's causing the problem. I tried taking the sidebar out to see whether or not it would generate that affect while loading and it doesn't.

So, DaniFolks, what do I do?

I have a float left and float right on the main content and the sidebar, if it means anything. Those are these two areas:

http://imgur.com/5qkEp.png

?!
The first two URLs look the same to me. Besides, they are images, no code. Not too much anybody can do with that!

Did you make sure to clear your floats?

<!-- left float div -->
<div class="left" style="float:left;">...</div>
<!-- right float div -->
<div class="right" style="float:right;">...</div>
<!-- clear floats -->
<div class="clear" style="clear:both;">...</div>

The floats are already cleared.

Care to post the code? Better yet, you have a link to it? I'll make a copy on my desktop and attempt to work with it.

Are you using any javascript to adjust the height of wrapper block or blocks inside it? If not, then it`s first time I`m seeing something like this. It would be nice to see your code.

By the way, does this happen in all browsers?

@Varnius There are two advertisements that load within that sidebar.

@floatingDivs I can't really post the code, though. I'm sorry. The jist of it is this:

<div id="background">
<div id="background2">

<div style="float: left;">Stuff here</div>
<div style="float: right;">I'm a sidebar</div>

<div style="clear: both;"></div>
</div>
</div>