Home arrow Technical Tips arrow CSS arrow Box Around Elements
Box Around Elements Print E-mail
After fiddling with CSS trying to determine how to place a "box" around elements on a page (in both IE and FireFox), I finally determined the issue and thought I would post it here for anyone else that runs into it:

Background
  • I had a container div with a solid border.
  • I had various other div's inside the container (some floated left, and some right).
  • I wanted a box around all the div's which were inside the container.

The Issue
  • I was able to get a border around all the inner div's in IE by specifying a height property for the container div (works in IE).
  • This did not work in FireFox. I was able to tweak the CSS for FireFox, but it was cludgy and did not work in IE.

The Solution
  • I placed a BR tag with the clear="all" attribute below all of the containing div's, but inside my container div.Note - the clear="all" attribute is not required.
  • This forced a line break which forced the box around all of the elements.

In hindsight, this was very easy, but -- as usual -- I got stuck worrying about the CSS rendering differences betweeen IE and FF. Enjoy!