If you are involved in creating, developing or maintaining any web site, a decent tool to help you analyze CSS and HTML code is essential. Before you can troubleshoot a problem with the look of a particular part of the site, you first need to find out where each part of the troublesome page is obtaining its content and its formatting from, and a good tool can help you.
Modern browsers have useful features built in. In the case of Google Chrome, just right-click and choose Inspect Element. Or in IE, press F12. But for additional power, a dedicated add-in is also useful, and one of the best is called the Web Developer add-in. It's been available for Firefox for a while, and now there's an official Chrome port.
To get the add-in, just head to https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm. It's free, and downloads automatically. Once installed, click its icon to activate it, and you can debug the current page in dozens of different ways. In the screen shot below, for example, I've turned on the display of Div order.
This is a brilliant tool. If you need to troubleshoot web pages, you shouldn't be without it.