Background color of the div footer "LEAK" to div's above

HTML & CSS
1

hello

the url i worked on his in here: http://ms.wpcoder.co.il/

i check the code three time for open div’s, the only thing i know that may cause something
like this, and i can’t find the solution why this thing happen.

the footer and the color need to start under the box having the sentence: “where am i”

thanks

2

Add clear:both to #footer so that it no longer extends behind the floated elements above it.

3

thanks a lot

can you explain me what just happened and how clear fixed the issue ?

i mean if all the div’s above was floting right and actully i don’t care if the footer was floted too
how that cause the color to LEAK ?

4

Floated elements are pretty much taken out of the flow of the document, and non-floated elements that follow them wrap around them, so the footer just wraps around them as such and its background color sits behind them.

Probably a better solution than clear: both on the footer is to set your box-container to overflow: hidden so that is wraps around those floated elements. That stops the issue happening in the first place. :slight_smile:

5

Hi Ralph

Thanks for the detailed explanation.

Did I had another way to put three boxes
Side by side without floating them ?

6

Floating them is fine. There’s no problem with that. It’s just that you need to remember that a container won’t wrap around floated contents by default, so you have to compensate for that. I would certainly use floats there, but I also would always use overflow: hidden on the container (well, almost always).

The other option instead of float is display: inline-block, but I don’t use that as much. :slight_smile:

7

Thanks a lot