# CSS float messing up background



## scrubbicus (Jan 23, 2009)

I don't ever remember CSS float doing this before but it's doing it now. Whenever I just to put two or more elements in a wrapper element then add float to the children 's it completely eliminates the background image that should be set on the wrapper .

Here's a quick example.

*HTML*

*CSS*
#header { width: 100%; clear: both; background: url("header.jpg") }
#menu { width: 33%; float: left }
#logo { width: 33%; float: left }
#search { width: 33%; float: left }

Without the floats the three elements are on top of each other but it has the background all the way down, however when I add the floats it voids the background completely and it's not there.

I've tried making the child IDs and classes.


----------



## Big-K (Nov 22, 2003)

Sounds like you neglected to clear your floats. Put 
, or create a css class with the property of clear:both and apply it to a break element, after any floated elements but within the container. If it only contains non-cleared floats it will have no height.

By the way, the correct place in your example would be to place it after #search.


----------



## tomdkat (May 6, 2006)

Big-K said:


> Sounds like you neglected to clear your floats.


Yep, I agree. When an element is floated, it is removed from the "normal flow" of the document. See this.

As a result, because all three child DIVs of the parent DIV are floated, the parent DIV is rendered as if there is nothing in it so the background doesn't show.

So, adding this:

```
<br style="clear: both;" />
```
or creating a CSS class, like this:

```
.clear { clear: both; }

.....
<br class="clear" />
```
should do the trick.

Peace...


----------



## scrubbicus (Jan 23, 2009)

Thanks.


----------

