the final word
so my friend erik messages me today about my css dilemma. at first he offered a solution but it was not a solution to my particular problem. after we further discussed what i was trying to accomplish he got the gist of my predicament and offered to ask his friend greg who is a big time css fanatic.
e2dot718: my friend says if she doesn’t float the inside layers
e2dot718: that it then works
e2dot718: e.g. exactly positions the interior layers
samofool: that would be why
e2dot718: hahah
e2dot718: why!
samofool: floating takes them out of the containing box, so the border snaps down to the smallest non-floated box.
samofool: you could put an empty div at the bottom, under the floated things, with a clear: both, and it should work.
samofool: or use this: http://www.positioniseverything.net/easyclearing.html
so there you have it kids. heres the official dilemma:
Internet Explorer: Wrongly clears the outer container
Firefox: Correctly doesnt clear the outer container but must be “tricked” into it.
They also discuss and address the html bloat problem and offer a solution which i liked. the ability to use :after in css to, i guess, “append” a css tag to follow without having to go in and manually creating a clear div.
thx for the help erik and greg 
-j
