How to find the widest element(s) on a web page?

Question

When working on a pre-existing fixed-width web design to try to make it responsive, what I find when I narrow the view / screen size during testing is that at some point a horizontal scroll-bar appears, indicating that some element or combination of adjacent elements on the site have a combined width that is higher than the width of the view. I need to identify what that element is so I can figure out what to do about it.

My question is, what is the best way to determine what the widest element(s) are on the page - ie, the reason why it won't narrow any further? Using the browser's built-in inspector tool this is just a guessing game on any long page, and is very inefficient for accomplishing this.

Thanks for any suggestions.

Answer 1

I don't see any special instruments for this, but in my work I use next way:

In the web inspector you choose some html node and apply overflow: hidden for this node, If horizontal scrollbar is hidden, whoa :) So the widest element is in this node, you delete for current node overflow: hidden and choose next node inside current node and again apply overflow: hidden and etc