1.Check Your Website Content

• Is an image in your DIV Container one pixel bigger then your container’s dimension in your CSS file?


• Do you have a long text string that’s too wide for your container set width? (ie. a long URL?)

2.Check Your HTML Source

• Io Are you typing valid HTML code? Or are you making tiny mistakes that can impact your layout? eg.
  <div id=”wrapper”><p></div></p>
  


• Did you use id=”XXXX” instead of class=”XXXX” or vice versa?

3.Check Your Spelling

• Copy and paste element names from your CSS file to your HTML file. This avoids typing and spelling errors.


• Did you order your CSS correctly? Make sure wrapper2 is actually inside wrapper if you write the following code: #wrapper #wrapper2 {color:#ffffff; font-size:10px;}


• Did you make sure to include 6 characters in your hex color?

4.Check Your Syntax

• Are you forgetting brackets ({}) or semi-colons (;)?


• Did you mistakenly forget to add the pound sign (#) before an ID or the period (.) before a class?

5.Don’t Use Padding/Margins with Width

• This is a common problem, especially with beginners. Padding or Margins combined with Width on the same element yield different results on different browsers. Example, this CSS:
  #wrapper { width:100px; margin:5px; padding:5px; }
  will appear different in Internet Explorer then in Firefox. This is especially critical if you’re using an image-dominant layout.
  

6.Check The Little Things

• Did you make sure to give your Div Container position:relative; before positioning a Div Container with position:absolute; inside it?
  

7.Allow Breathing Room

• Internet Explorer 6.0 will add a 3 pixel breathing room to some div containers, either use a build your website knowing that this can very well happen and mess up your layout.
  

8.Use a Validator

• You can use the w3c CSS validator or the validator built into the Web Developer toolbar (a Firefox Plugin) to scan your CSS and can help solve your CSS problem.
  


• Opening your CSS file in Adobe Dreamweaver can sometimes give you an idea where something went wrong.

9.Be Aware Of Some Browser’s Existing Problems

• You may spend hours trying to find the solution when the problem lies in the Web Browser, and example includes the Peek-a-boo IE6 bug.
  

10.Do Some Research

• Odds are you aren’t the only person that’s ever had the CSS problem you’ve described, use Google and type in keywords for your search you think others would use