Question

On this page, I’ve built a CSS Ribbon header that has text/ icons set in the background.

The sets will be duplicated down the page, The banner works perfect on just one set, but after I try to create a div exactly below the background covers the entire section.

The HTML:

<div>


<p class="paddingbottom"><span class="bold">WHO ARE THEY? </span> Deborah is an active member of Golden Seeds a nation-wide angel investor network that provides early stage and growth capital to women-led and women-owned companies across all sectors.  During summer 2010, Jamie interned for Golden Seeds and learned how entrepreneurial ventures are funded in a collaborative environment where women’s potential for economic growth is actualized.</p>

<p>.If you are an accredited investor interested in joining Golden Seeds, please click here.</p>
</div>

</div>
<div class="clear"></div>


<div>
<p class="headerorg"><span class="shiftorg">Golden Seed </span> <span class="right"><span class="whitetitle">Website:  <a href="http://www.goldenseeds.com/">goldenseeds.com</a></span><a href="#"><img src="" alt="facebook"/></a><a href="#"><img src="http://jumpthru.net/newsite/wp-content/themes/twentyten/images/other/twitter.png" alt="twitter"/></a></span></p>


<img src="" />
<div class="leftcolorg">

<p class="paddingbottom"><span class="bold">WHO ARE THEY? </span> Deborah is an active member of Golden Seeds a nation-wide angel investor network that provides early stage and growth capital to women-led and women-owned companies across all sectors.  During summer 2010, Jamie interned for Golden Seeds and learned how entrepreneurial ventures are funded in a collaborative environment where women’s potential for economic growth is actualized.</p>

<p>WHY ARE THEY IN OUR NETWORK?JumpThru collaborates with Golden Seeds to help increase the number of women-led tech companies that get the support and funding they need to grow.  Advise on tech deals, collaborate on educational programming.If you are an entrepreneur seeking funding, please click here for the application to Golden Seeds’ program. 

If you are an accredited investor interested in joining Golden Seeds, please click here.</p>
</div>

</div>
<div class="clear"></div>

The CSS:

.headerorg {
        position: relative;
        color: #fff;
        font-style:italic;
        text-transform:uppercase;
        margin: 0 0 20px -15px;
        padding: 1px 0 2px;
        background: #ff9900;
        }


.headerorg a {
    color:#FFF;
}


.headerorg:before
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-color: transparent;
        bottom: -8px;
    }

.headerorg:before
    {
        border-width: 0 10px 10px 0;
        border-right-color: #8b5f1d;
        left: 0;
    }


.shiftorg {
    padding-left: 15px;
    background-position: 5px 50%;
    background-image: url();
    background-repeat:no-repeat;
}

Answer 1

The problem is that your float clearing isn’t working.

To achieve float clearing, you’re using this:

<div class="clear"></div>

Which is a reliable, if primitive method.

The problem is with your CSS (line 321, style.css):

.clear {
    :both;
}

That should be:

.clear {
    clear: both;
}

You evidently got confused by the fact that your class and the property are both named clear.