Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS background image disappears when float property is set to 'none'

CSS background image disappears when float property is set to 'none'

Problem

I have a series of three boxes, each approximately one-third of the screen Width. The first two boxes have widths of 33.333% and are floated left. I've removed the Float on the third box and set the width to auto so that it fills the remaining horizontal space. However, doing so causes the background image to disappear. I've created a Fiddle demonstrating this effect.

The HTML is very simple:

And here's the CSS:

div {
  float: left;
  width: 33.333%;
  height: 120px;
  background: #EEE url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/200px-Approve_icon.svg.png') no-repeat center center;
  background-size: 100px 100px;
}

div:nth-child(2) {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

div:nth-child(3) {
 float: none;
 width: auto;
}

Any ideas?

Problem courtesy of: David Jones

Solution

You need to add overflow: hidden:

div:nth-child(3) {
 float: none;
 width: auto;
 overflow: hidden;
}

Without this directive the 3rd DIV is not filling the remaining space but overlapping the rest of the DIV's as well.

Solution courtesy of: haim770

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS background image disappears when float property is set to 'none'

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×