Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

My understanding is that most layout (positioning and dimension) problems with CSS are the result of a bad understanding of which is containing box of the box you are trying to lay out.

However as far as I can tell, there is no means to know which is that containing box in browsers development tools like firebug, chrome or opera's inspection utilities.

So does anyone know a reliable way to get that information ? And if possible in a visual way, e.g. like the box margin, border and padding boundaries highlighting present in all modern browser.

share|improve this question
    
Not tested (hence comment rather than answer), but have you tried adding a :before with position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(0,255,0,0.3)? –  Peter Taylor Sep 12 '11 at 10:27
add comment

closed as off topic by Su', John Conde Sep 27 '12 at 1:55

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

2 Answers

up vote 1 down vote accepted

.offsetParent

Like all really useful stuff not part of any specs, but seems supported by all browsers. Only checked on FF3.5,3.6,5,6, IE8 and Chrome13 though.

For visual aid you then just have to find the property in the DOM inspector of your browser and use its element highlighting feature the usual way.

share|improve this answer
add comment

However as far as I can tell, there is no means to know which is that containing box in browsers development tools like firebug, chrome or opera's inspection utilities.

Not true.
Open the Firebug pane, switch to the HTML tab and click the icon that looks like a rectangle with a mouse curser over it(second from the left). Mouse around in the browser pane and you'll see a breadrumb showing you the DOM path to whatever you're over at the moment, just above the panel showing you the actual markup involved.

If you have the Web Developer Toolbar, go to Information->Display Element Information(or Ctrl-Shift-F) and mouse around. A similar breadcrumb display will appear below the toolbar. Click again locks to the current element.

share|improve this answer
    
Thanks for taking the time to answer, but you are not actually answering the question. Which is: in that breadcrumb of yours which element is the containing block of the element I selected. And when I say containing block I mean containing block as defined in the CSS recommandation, which may not be the immediate ancestor of the selected DOM node but any ancestor depending on the CSS position property of those nodes, as well as others like float, ... –  Cans Sep 11 '11 at 21:43
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.