I am having some issues with one of my elements, #bodyblock, that is not displaying right in Firefox. I have tried changing the position to absolute but that makes it cover up my footer. If someone could look at it and give me some advice I would really appreciate it. The site is at www.geocities.com/clinthibbs/stylesheet.css and then just view source to see the html. Thanks to all.
Floated objects are taken out of the normal flow. This means that the #blockbody has no content to expand to. A common way to solve this is to add an empty DIV with clear:both at the end of #blockbody. But, we can actually achieve the same effect with only CSS: /* force container box to enclose floats */ #blockbody:after { content: "."; /* generate artificial content */ display: block; clear: both; /* force below floats */ height: 0; visibility: hidden; /* make it invisible */ } Code (markup):
I inserted that into my css but it still did not work. What exactly does putting :after behind the selector do? Is there any other ideas on how to make the #blockbody expand.
It seems I read your source code too fast. The correct ID is #bodyblock, but I used #blockbody. Make that small correction and see if that works for you.