preventing block elements' backgrounds from flowing behind floated content

I have a block element floated to the left with various block elements to the right of it. These non-floated elements have backgrounds on them which are showing behind the floated element. I'd like to pr开发者_开发百科event that from happening. Normally I'd achieve this with a margin-left on the elements but I'd like the elements which are below the floated element to use the full width of the container (otherwise it'll just look like two columns with white-space beneath the floated element).

I can't determine before hand which elements will be below the floated element since it may be different heights (or not there at all) depending on the page.

Thanks for reading!

---

One option is to apply overflow:hidden to each of the normal elements:

http://jsfiddle.net/sdleihssirhc/y2kG8/

IE6 might have trouble with that... 7 too... I can't remember exactly who sucks in what way. But also giving those elements a zoom:1 should fix it.

---

Have your tried using display:inline-block on the floated element? i.e. - http://jsfiddle.net/jordanlewis/krbpR/

---

This is as close as I can get it. I think what you're asking for may not be possible.

Live Demo

<style type="text/css">
#wrap {
    background-color: #EEE;
    overflow: auto;
}
.floated {
    border: 1px solid #F00;
    float: left;
    padding: 5px;
    height: 60px;
    width: 20%;
}
.element {
    background-color: #DDD;
    border: 1px dashed #000;
    display: inline-block;
    float: left;
    margin: 5px 0;
    padding: 2px;
    width: 75%;
}
</style>

<div id="wrap">
    <div class="floated">floated element</div>
    <div class="element">element</div>
    <div class="element">element</div>
    <div class="element">element</div>
    <div class="element">element</div>
    <div class="element">element</div>
</div>