Css Background Color With Floating Elements

css background color with floating elements

When the children elements are floated, they are taken out of the flow of the document. In doing so, the parent no longer has defined dimensions, as the children aren't technically occupying space. Thus, the parent element collapses upon itself. The same thing occurs when absolutely positioning the children elements too.

In this instance, we can fix it by adding overflow:hidden to the parent element, thus forcing it to contain the children elements. Alternatively overflow:auto works just as well. Some may suggest it is even better than overflow:hidden as you will be able to tell if any calculations are off.

jsFiddle example

.content {
    overflow:hidden;
}

Now the parent element is no longer collapsed and the red background is visible.

You could alternatively use a clearfix if you are looking for support in older browsers, but I don't recommend doing so.

Why, when I float right, the background color disappears?

When you float an element you take it out of the current document flow. What does that mean? Well, as far as container elements are concerned those floated elements don't take up space. If the container element doesn't have any content taking up space (height), then the height of the container is 0 and no background color. Even though floated elements don't take up space, other elements will "see" them and flow around them.

How to fix? Clear the float. The most popular method is to use a clearfix. A clearfix is typically a CSS class. I use the micro clearfix by Nicolas Gallagher.

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

<footer class="cf"><!-- floated elements --></footer>

Another clearfix solution is to apply overflow: hidden; to the element containing floated elements. This has some drawbacks as sometimes you don't want to hide content that overflows the parent.

footer {
    width: 100%;
    background-color: #f5c300;
    overflow: hidden;
}

why does float in css ruin the background color

It sounds like you need to clear the floated elements within nav.

You can do this within the css like so:

nav {
  overflow: hidden;
}

This is where the "clearfix" comes into play. It's another way to do the above:

.nav:after {
  content: "";
  display: table;
  clear: both;
} 

The clearfix is probably the best way to do this, as you don't need to create html elements whose sole purpose is to clear floated elements. For a deeper understanding of why this must be done, see this css tricks article.

div background color not working with inputs floated left

When you float elements, you take them out of the normal flow of the document, and as a result, other non-floated elements do not make room for them.

What you're observing is that your div no longer takes the full height of its child elements because they're floated. All you need to do is to "clear" or undo the floating, and make days take the full height, and its background color will show. My preferred way of clearing floats is to give your containing element overflow: hidden:

.days
{
    background-color:#000;
    overflow: hidden;
}

For more info about clearing floats, check out the Quirksmode.org article about it, which includes an explanation of the overflow: hidden method.

Floating div not displaying background color when i am not using overflow?

One of the common problems we face when coding with float based layouts is that the wrapper container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new CSS trick either. It's been documented before long long ago.

Background not showing behind floating divs

You container div #right_b is collapsing because its children are floating. You can fix this with the "Clear-Fix" technique. You may want to check out the following Stack Overflow post for a few solutions:

• Which method of ‘clearfix’ is best?

One popular solution is to add overflow: hidden to your container div: #right_b:

#right_b {
   background:transparent url('img/right.png');
   background-position: right top;
   background-repeat: repeat-y;
   overflow: hidden;
}

Another common one is to add a <div style="clear: both;"> </div> before closing your container div:

<div id="first">
   <div id="left_b">
      <div id="right_b"> 
         <div id="text">text 1</div>
         <div id="text2">text 2</div>
         <div style="clear: both;"> </div>
      </div>
   </div>
</div>

---

Related Topics