css layout hick-up in Firefox

Got a problem with getting a nice border around my beautifully centred page using CSS.
I am using something like code given below where #outside is a div which goes around all my content and is supposed to provide the border. #inside_content is the one of the divs I have inside the #outside div (making sense?). The problem is that in Firefox the #outside div's border does not go down to and around divs inside it which have a float:left property. Works fine in IE which is odd. Does anyone know how to fix this?

body{
text-align: center;
}

#outside {
text-align:left;
margin-left: auto;
margin-right: auto;
border: 4px solid #FFFFFF;
}

#inside_content{
float:left;
}

 

This may or may not be the solution, but try adding "position:absolute;" to #outside. ie;

#outside {
position:absolute;
text-align:left;
margin-left: auto;
margin-right: auto;
border: 4px solid #FFFFFF;
}

 

That one does not really work. It does drop the border down, but it also get rid of the centering. I managed to solve it eventually by adding the following item to the css sheet. If someone else has the same problem see http://www.csscreator.com/attributes/containedfloat.php
for details.

#outside:after {
content: ".";
display: block;
height: 0;
overflow:hidden;
clear: both;
visibility: hidden;
}

Code (markup):

 

hey, you could try a repeating background image, from top to bottom with thewidth of your site + 4 pixels on each side. Just throw it in the body tag as background image and center it.

 

Yeah it would probably work. I tend to get pedantic about bugs, sometimes I learn from fixing them and sometimes I waste days going round in circles. Cheers for the recommendation anyway.

 

any time, I always do it that way, then I can do stuff with the border like a shadow or pattern, and it works in every browser as far as I know