Aligning Text in Fixed footer With Container

Question

I'm trying to align the text in my fixed footer with the left edge of the site container, rather than the left edge of the footer. The footer is absolutely positioned at 0px at the left and bottom.

Here is my Sass code:

#neo_container {background: #000; width: 960px; height: 100%; margin: 0 auto; }

#neo_footer_container { 
        position: fixed;
        bottom: 0px;
        left: 0px;
        height: 35px;
        width: 100%;
        z-index: 10000;
        background: #666;
        color: #FFF;

        .neo_footertext{float: left; margin-right: 400px; font: 11pt Arial, Helvetica, sans-serif;} /* Formatting for copyright text in fixed footer */
        .neo_footertext2{font: 11pt Arial, Helvetica, sans-serif;}  /* Formatting for Neoscape text in fixed footer */

    }

The HTML and CSS can be viewed here: http://jsfiddle.net/maW8E/

Answer 1

If you aren't adverse to altering your HTML a little, you could add an internal wrapper that has a same width as the container you're trying to align to. So you HTML for the footer could look like (note addition of .inner-wrap around contents:

<div id="neo_footer_container">
    <div class="inner-wrap">
        <p class="neo_footertext">469 SEVENTH AVE NEW YORK NY 10018 Privacy Policy | Legal Statement | Disclaimer</p>
        <p class="neo_footertext2">Designed by Neoscape</p>
        <!--Placeholder for 'Designed by Neoscape' logo-->
    </div>
</div>

Then, removing both of these CSS styles on .neo_footertext:

#neo_wrapper .neo_container #neo_footer_container .neo_footertext {
    float:left;
    margin-right:400px;
}

And adding these ones to style .inner-wrap:

#neo_wrapper .neo_container #neo_footer_container .inner-wrap{
    width:960px;
    margin:0 auto;
}

Now, you should end up with an internal container of the same width as #neo_wrapper, centered within the #neo_footer_container - so your footer content will remain aligned to the edge of your main content wrapper.

Here's an updated JSFiddle to demonstrate the code working.

Hope this helps! Let me know if you have any questions.

Answer 2

Here: Remove float: left

 .neo_footertext{
   float: left;  //Remove this
   margin-right: 400px; // I would also remove this, unless you have a reason to put it in.
}