I was reading an article about browser inconsistencies and in particular about what the author calls clearing floats – “when a container or wrapper div doesn’t correctly wrap around the containing divs”.
He suggests using
overflow:auto
or
overflow:hidden
in your container; however this solution makes the container div to have scrollbars which is not pleasant to the user eyes; the same author states that “You need to keep in mind that overflow:auto might cause some issues in Firefox” and IE7.
My solution: just use
display:table
in your container or wrapper div; this way your div will wrap around the containing divs; moreover, you do not have to declare the height of the div because it will be computed by the browser itself.
