Why are divs behaving like this?

I get this problem come up sometimes my divs to not behave as expected. What I want is for them to 'flow' layout as I understand they should however they are not I just wondered why not. I have used firebug to inspect the css and there doesn开发者_运维知识库't seem to be anything out of the norm that they are picking up yet they don't flow one after the other.

I have supplied two sets of code one in a test site that is rendering correctly and then the problematic page.

Code for divs:

<div style="border:solid 1px #c9c9c9; width:100px; height:100px; float:left;">
  sss
</div>
<div style="border:solid 1px #c9c9c9; width:100px; height:100px; left:20px; position:realtive;">
  2
</div>

Pic Of Divs Flowing:

Pic Of Divs Not Flowing

Anybody know how to get them to behave as expected? Its worth pointing out that if I put a float:left in the second div this sorts the problem but then it means that the next div doesn't drop down to the next line properly....

Hope someone can help, much appreciated

float only "cuts" text, not boxes. And none of your pictures are correct renderings of those css properties. The correct rendering should be both boxes at the same place (overlapping), with 'sss' inside the borders, and '2' below the bottom border.

Using float:left; on both divs should take care of it.

<div style="float:left;">sss</div>
<div style="float:left;">2</div>
<div style="clear:both;">the next div</div>

If stuff is acting up across browsers, make sure you use a doctype which has universal default css, such as xhtml 1.1. Otherwise you'd might want to generate a default stylesheet for all elements.

Imho try add float to both divs, after that third div should be clear:both.

You can make both div's float left, and on the 3rd div in the element or css make it "clear:both"...

Nice images by the way :D how the heck did you make em that unclear anyway.