How can I see a webpage's structure "inline" with the visual representation of the actual page, all at once?

I'm trying to understand HTML layout better, but it's hard to get a feel for it, even having the source open on a separate monitor, because there's just so much expansive and miscellaneous code. I suppose I could sift through it, clean it up, and set up some type of custom collapsible tree system, but that would take too long for the amount of pages I'd like to get a quick view of the layout/structure of.

For reference, I'm using Firefox for my internet browsing.