div above absolute div and overflow

I have a setup where I have an absolute div that is set to left position and right position to allow for liquid layout. This all works nicely but then I run into an issue where I have a div below that with some copy. The issue is that div with the copy should be below the absolute positioned div. Right now its showing up above it which is not correct.

I have often seen this issue because of collapsing parent div's after the child have been set to absolute, but to get around that I use clear all 开发者_如何学JAVAor overflow:hidden on the parent and it stops that collapse from happening. This time around its not collapsing but its showing my bottom div above the top div.

here is a jsfiddle link to show you my code.

I'm not sure why you think this will work. You have the container footer. This contains two child divs - footerWrapper and footerTerms.

FooterWrapper is absolutely positioned. So it is taken out of the flow of all other elements. footerTerms is a sibling of footerWrapper and naturally starts in the top left of its parent, footer.

why is footerWrapper absolutely positioned when it seems you want it to affect the content flow of your page? Make it relative or leave it static.

http://jsfiddle.net/mrtsherman/7cNf7/3/

<div class="footer">
    <div class="footerWrapper"> 
    </div>
    <div class="footerTerms">
    </div>
</div>

I have probabaly mis-understood what you want to do, but if you wanted a liquid layout why not use something like this:

CSS:

<style type="text/css">
    #footerWrapper {
        background: #ccc;
    }
    #footerWrapper .section {
        float: left;
        width: 33%;
    }
    .clear:after {
        content: " ";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    html[xmlns] .clear {
        display: block;
    }
    * html .clear {
        height: 1%;
    }
</style>

HTML:

<div id="footerWrapper">
    <div class="clear">
        <div class="section">
            Footer section 1<br />
            Footer section 1<br />
            Footer section 1
        </div>
        <div class="section">
            Footer section 2<br />
            Footer section 2<br />
            Footer section 2<br />
            Footer section 2
        </div>
        <div class="section">
            Footer section 3<br />
            Footer section 3<br />
            Footer section 3
        </div>
    </div>
    <div class="terms">
        Terms
    </div>
</div>

Then if you wanted to hook the footer to the right of the page for example you can just edit the #footerWrapper CSS and give it a width and float.