So I’ve been working on a basic site design for a client this evening (for reference:http://thomaswinchester.com/schaeferhvac/index.php) and I’m getting some odd results. The area of concern is a three-column content section in the middle of the page.
When I initially uploaded the files to my server, the columns did not appear to work correctly. See the image below:

So I thought it was just that the document was loading an old .css file or something, so I decided to hit ctrl+f5 to get an un-cached look. Everything seemed to work fine. See the image below:

Which is exactly how I WANT it to look. So I made a couple back-end changes to the design and I hit refresh (f5) and the layout broke again. Then I hit ctrl+f5 and it was fixed. I have been continuing this pattern off and on for about 15 minutes now.
My question is: why is this occurring? And which page is the “actual” page. For example, I visited the page from a laptop that had never been to the domain before, and it loaded the broken page. Sure enough, hitting ctrl+f5 fixed it! Then, hitting f5 broke it.
At this point I should mention that I’ve tested this behavior with similar results in the latest versions of Chrome, FF, IE, Opera, and Safari for Windows (though Safari for Windows doesn’t seem to have a ctrl+f5).
I did some Googling and came upon a few leads: mostly explaining the difference between f5 and ctrl+f5. My biggest concern is that if it IS loading a cached file (even 20 minutes after the newest css files were uploaded), how can I stop that from happening in the future?
Also, I won’t post the code I’m using for the layout unless you specifically need it, because I’m not sure that’s the issue. The page validates as XHTML Strict, but that doesn’t mean I did everything right haha. If necessary, you can view the source code by clicking on the URL in the first paragraph.
THANK YOU IN ADVANCE FOR ALL OF YOUR HELP!!!
Yes this issue is must be about CSS caching.
There are fews ways how to force browsers to load external files, they are all about making browsers think the file is updated:
Add GET parameter to css file, such as
time(), or something similar.<link rel="stylesheet" type="text/css" href="style.css?<?php echo time(); ?>" />Add .htaccess directives to have additional headers for certain files (css files in example):
<filesMatch "\.(css)$">FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>