Layout Looks Good on Localhost, But Breaks on Live Website?

This is some weird problem. I'm building a new layout in localhost. The layout looks perfectly normal in the local server; no errors, no floating out of parent box.

But when I put it on the live site/live server, the layout suddenly breaks. The sidebar float out of the parent box, and there are also function that does not work.

.

Here are some screenshots:

Normal layout (when viewed on localhost):

http://i.imgur.com/19rGS.png

Broken layout (when viewed on the live site):

http://i.imgur.com/rzauG.png (the sidebar floats out of the box and moved to bottom, check next screenshot)

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

.

I've checked both source code (in localhost and live site) and oddly both are exactly similar. I really have no idea why this happens. Any help? For ad开发者_如何学JAVAditional note, the site is using Wordpress for the CMS.

The layout isn't the same between a post's page and your home page. For example, on your home page, #primary is a child of #main:

<div id="main"> 
    <div id="container">
    </div><!-- #container -->

    <div id="primary" class="widget-area">
    </div><!-- #primary .widget-area -->

    <div id="secondary" class="widget-area">
    </div><!-- #secondary .widget-area -->
</div>

Yet, on your post pages, #primary is not a child of #main, thus breaking your CSS and pushing the sidebar off the page:

<div id="main"> 
    <div id="container">
    </div><!-- #container -->
</div><!-- #main -->

    <div id="primary" class="widget-area">
    </div><!-- #primary .widget-area -->


    <div id="secondary" class="widget-area">
    </div><!-- #secondary .widget-area -->

I hope this helps.

Be aware that on the production mode there can occur problems like Cache loading... Meaning that whenever you try to upload something new, the host might render the old version of the file.

For example, if you upload your website to a host and you have a css:

style.css

And you wish to change something, you can do either:

1.Ask the hosting service to restart the server after you uploaded the new css.

or

2.Upload the same file but with another name, like stylev1.css

Remember to mention it in the header of the html.

This should be a quick-fix to the problem.