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
#inner3 to appear next to each other horizontally inside
#outer but what is happening is that
#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
#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 why 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?