<div>s not displaying in correct position?

[aqutalion]

I have an odd problem with some CSS, and I was wondering if this was a problem on my end, or a browser bug. Basically, I have a container div, with two divs inside, and one displaying above the other.

<snip>

The container div uses relative positioning, as do both child divs, because some of the content they contain use absolute positioning. Child div A is floated, because it contains floated content, and that was the only way I could get it resize properly. Child div B is not floated. The container div has a padding of 0, and both child divs are specified to have the same width as the container. The code looks basically like this:

<div id="Container">
 <div id="ChildA">
 Content here.
 </div>
 <div id="ChildB">
 Content here.
 </div>
</div>

But if I load the page in a web browser (FireFox), the container only resizes to the height of child div A, and the child div B appears to the right of child A, with its top aligned with the top of the container.

<snip>

Where it gets weird is if I specify a border for Child B. Even though the content of child B appears to the right, the border layers over child A.

<snip>

I tried making child B positioned normally instead of relatively, but got the same result.

So what did I do wrong?

[edited by: DrDoc at 12:31 am (utc) on July 26, 2008]
[edit reason] No URIs. See posting guidelines. [/edit]

[Fotiman]

Can you provide a small, complete example (including HTML and CSS)?