CSS Tip: DIV Loses Background With Float:Left

Posted on: 05-12-2010 Posted in: Blog, CSS

For some reason my mind cannot ever remember this when I come across this issue until I am pulling my hair out. So, I’m writing a post to both remind myself and hopefully help someone else out.

If you have created a DIV that has a CSS float:left; positioning element odds are, on occasion, you may encounter a tricky situation, especially in Firefox browser, in which your background seems to disappear.

The solution that works for me is a quick fix – add:

overflow: hidden;

To your PARENT DIV, not the current div that you are styling. This tells the parent div that you actually want the CHILD container to be the full width of the page.

There are a few other solutions. I found this to be the most useful article on the options today at least:

http://doctype.com/div-loses-inherited-background-color-after-adding-float

About the Author

Ariel Snapp
Ariel is a Web & Online Marketing Consultant based out of the Longmont/Boulder/Denver Metro area. She is focused on research and strategy which provides user-centric designs and highly targeted online marketing programs. She has a B.S. in Business Administration with a Marketing focus and is a Google AdWords Qualified Individual.

Praise

“Ariel is a professional web designer of the highest caliber whose knowledge of web design, web marketing and search engine optimization took our online channel success to new levels. Ariel did an incredible job of harmonizing the marketing and operational themes within our website structures, meeting both the needs of the customer and of the companies marketing and sales efforts. She had great attention to detail, and continuously looked for ways to better the site and increase the penetration success of our marketing efforts. She is a very strategic thinker, and worked hard in balancing numerous projects and task to ensure all were completed on or before due dates. She brings value to meetings, and is able to effectively communicate with all levels of management within the organization. Her positive outlook and goal oriented work style made it a true pleasure to work and partner with her on any occasion. Ariel brings tremendous value to work every day, and her passion for excellence shines in all she does. I highly recommend Ariel Snapp!”

Les Boothby