<p>For example I have a situation where I have something like this (contrived) example:</p>

<pre><code>&lt;div id="outer" style="margin: auto&gt;
    &lt;div id="inner1" style="float: left"&gt;content&lt;/div&gt;
    &lt;div id="inner2" style="float: left"&gt;content&lt;/div&gt;
    &lt;div id="inner3" style="float: left"&gt;content&lt;/div&gt;
    &lt;br style="clear: both"/&gt;
&lt;/div&gt;
</code></pre>

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

<p>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 <code>#inner3</code> element is not appearing on the same line as <code>#inner1</code> and <code>#inner2</code> and causing <code>#outer</code> to get wider.</p>

<p>So, my question is: Is there any way to determine <strong>why</strong> the browser is sizing #outer the way it is, or why it is choosing to wrap <code>#inner3</code> 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?</p>

[{'answer_id': 44872, 'author': 'Simon Young', 'author_id': 4330, 'author_profile': 'https://Stackoverflow.com/users/4330', 'pm_score': 2, 'selected': False, 'text': '<p>Try the <a href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="nofollow noreferrer">Web Developer Plugin</a> for Firefox.  Specifically, the <strong>Information -> Display Block Size</strong> and <strong>Outline -> Outline Block Level Elements</strong> options.  This will allow to see the borders of your elements, and their size as Firefox sees them.</p>\n'}, {'answer_id': 44902, 'author': 'levik', 'author_id': 4465, 'author_profile': 'https://Stackoverflow.com/users/4465', 'pm_score': 0, 'selected': False, 'text': "<p>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.</p>\n\n<p>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.</p>\n"}, {'answer_id': 44926, 'author': 'John', 'author_id': 2168, 'author_profile': 'https://Stackoverflow.com/users/2168', 'pm_score': 0, 'selected': False, 'text': '<p>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.  </p>\n\n<p>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".  </p>\n\n<p>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.</p>\n'}, {'answer_id': 45077, 'author': 'Bryan M.', 'author_id': 4636, 'author_profile': 'https://Stackoverflow.com/users/4636', 'pm_score': 2, 'selected': False, 'text': '<p>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.</p>\n\n<p>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). </p>\n\n<p>Also, a deeper understanding of how CSS layout helps a lot as well. It can get pretty complicated.</p>\n\n<p>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.</p>\n\n<p>Also, if you\'re striving for IE6 compatibility, there are a number of <a href="http://www.positioniseverything.net/explorer/expandingboxbug.html" rel="nofollow noreferrer">float related bugs</a> that could also cause similar problems. </p>\n'}]
['https://Stackoverflow.com/questions/44864', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2168/']