Tuesday, 31 March 2009

HOWTO: outer DIV can not cover element with FLOAT style

Normally, all the content in the outer DIV will inherit the css styles from it, such as background.
But when the float style is used for inner tag, this part of content may come out of the outer DIV. Also, if you are using Firebug in Firefox, when your mouse is hovering on the outer DIV, the browser then will not cover all the parts inside the DIV.

All are because the FLOAT style.

In this article, Simple Clearing of Floats, 4 methods are intorduced to fix this 'bug', which appears in Firefox, Chrome, while not in IE, this did supprise me. Normally IE is more buggy in my opinion.

My favorite method is to append the outer style with 'overflow:auto'. Then, the floated part will be covered by the outer DIV, no matter the background issue or the selection problem in Firebug.

See also: (other conflicts with some attributes)
text-align for normal div tag ( this will not work 100% in table with align attribute, this will be ignored) and align attribute for table: here

style of marquee in div ( style of div will not work 100%)

No comments:

My photo
London, United Kingdom

Facebook & Twitter