Is there any easy way to determine what factors are contributing to the size of an HTML element?

Question

For example I have a situation where I have something like this (contrived) example:

<div id="outer" style="margin: auto>
    <div id="inner1" style="float: left">content</div>
    <div id="inner2" style="float: left">content</div>
    <div id="inner3" style="float: left">content</div>
    <br style="clear: both"/>
</div>

where there are no widths set on any elements, and what I want is #inner1, #inner2 and #inner3 to appear next to each other horizontally inside #outer but what is happening is that #inner1 and #inner2 are appearing next to each other and then #inner3 is wrapping on to the next line.

In the actual page where this is happening there is a lot more going on, but I have inspected all of the elements very carefully with Firebug and do not understand why the #inner3 element is not appearing on the same line as #inner1 and #inner2 and causing #outer to get wider.

So, my question is: Is there any way to determine WHY the browser is sizing #outer the way it is, or wy it is choosing to wrap #inner3 even though there is plenty of room to put it on the previous "line"? Baring specific solutions to this problem, what tips or techniques do you hardcore HTML/CSS/Web UI guys have for a poor back end developer who has found himself working on the front end?

Answer 1

Try the Web Developer Plugin for Firefox. Specifically, the Information -> Display Block Size and Outline -> Outline Block Level Elements options. This will allow to see the borders of your elements, and their size as Firefox sees them.

Answer 2

@Simon Young This doesn't really tell me anything that Firebug doesn't already tell me. I know what the sizes are, I need to know why they are that way. To clarify, in the example I gave, Firebug/Web Developer Tool bar are reporting the size of #outer as 694 and then wrapping #inner3 onto the next line. But there is nothing that should be constraining #outer to 694, so #inner3 should be on the same line and #outer should be made wider in order to hold it. My browser is set to 2560 wide and there is ~1900 pixels worth of free space for #outer to expand into but it's not doing it.

Answer 3

In Firebug's CSS tab, you can see what style rules apply to a selected elements in the cascading order. This may or may not help you in your problem.

My guess would be that something about the content of #inner3 is causing it to wrap below the first line, and the #outer is just getting sized to accommodate the smaller needed space.

Answer 4

So I found the answer in my specific case -- there was a div much further up in the DOM that had specific left/right margins set which compressed it and everything in it.

But the heart of the question is really how can you easily debug this sort of issue? What would be perfect in this case for example would be something in Firebug that, when hovering over an element's size in the layout panel would display a tool tip that says something like "width constrained by outer element X; height constrained by style Z on element Q" or "width contributed to by inner elements A, B and C".

I wish I had the time to write something like this, although I suspect it would be difficult (if not impossible) to get that information out of Firefox's rendering engine.

Answer 5

It would be nice to have a tool that could tell you exactly what all your layout problems are, but in this case the browser rendered the page exactly how it should have -- the combined width of the floats exceeded the width of the containing block, so the last one drops to a new line (this is slightly different than the IE6 expanding box/float drop problem which is typically caused by content inside the float, not the floats themselves). So in this case, there was nothing wrong with your page.

Debugging this is simply a matter of walking through your HTML in Firebug and figuring out which children of a block is exceeding the block's width. Firebug provides plenty of information for this purpose, although sometimes I need to use a calculator. I think what you described about being able to see which elements constrain other elements would simply be too complex and overwhelming, especially for elements that are removed from normal flow (such as floats or positioned elements).

Also, a deeper understanding of how CSS layout helps a lot as well. It can get pretty complicated.

For example, it is generally recommended to assign explicit widths to floated elements -- the W3C CSS2 spec states that floats need to have an explicit width, and does not provide instructions of what to do without it. I think most modern browsers use the "shrink to fit" method, and will constrain themselves to the width of the content. However, this is not guaranteed in older browsers, and in something like a 3-column layout, you'll be at the mercy of at the width of content inside the floats.

Also, if you're striving for IE6 compatibility, there are a number of float related bugs that could also cause similar problems.

Answer 6

1. #outer #inner1 #inner2 #inner3 {float: left; }
2. #outer {width: ZZZpx; }

By floating all divs, you get #outer to contain its children -- and you get all inner divs to float up next to each other. But you need to give #outer a width so that there's room for all three inner divs. Keep the clearing <br> to ensure that anything afterwards starts a new "line."