CSS Float property - please help

[A-Damage]

Can someone explain to me why if I have two divs inside a container div, and I try to declare a float property for one of the inner divs, Firefox suddenly thinks the inner div with float declared should extend outside the container div if the inner div has enough content to do so? This doesn't happen in IE and it drives me crazy. What I want is a container div with two inner divs, one inner div on the left followed DIRECTLY by another on the right. How do I do this without using float since Firefox is being retarded about it?

[vchris]

You could use position absolute for the 2 inner divs. I usually use floats and it works great. Both are float left I set both their widths, the second one (right) you should set a left-margin of the size of the left one + padding. Should work.

[A-Damage]

Aha, but see, the problem is that if you declare float or position:absolute for any inner divs, Firefox now thinks, for whatever reason, that the inner divs are no longer contained in the outer div, and if they have enough content to extend past the container, they will, whether you want them to or not. I just tried what you suggested and declared a float:left for both and now neither of them are contained within the boundries of the container.

[vchris]

It always worked for me... You got anything online or can you show your code? If pasting your code here please use [ codebox ][ /codebox ], easier for everyone.

[A-Damage]

Yah, sorry about not posting the code. But, I did find a solution. I basically put a container inside the container, something like:

<div class="container">  <div class="main">	<div class="left pane"></div>	<div class="right pane"></div>  </div></div>

I then gave the main, left pane, and right pane divs all float lefts. For whatever reason, this fixes the problem. Thanks for the response anyway.

[vchris]

I never did that before and it always worked out for me... hmmm...