Search code examples
asp.netcssmaster-pagesnopcommerce

Masterpage footer alignment doesn't align correctly

I am having a hard time putting footer content at the bottom of the page, at this moment it's right aligned and I have no idea what else to do to put below the content.

See the image attachment to see how does it look at this moment:

screenshot

The content from the master page you can find it below:

       <div style="clear:both;"></div>
 
                      <!-- FOOTER -->
       <div class="footer">          
            <asp:Image ID="Image2" runat="server" 
                    ImageUrl="~/App_Themes/nopBlue/icons/facebook.png" CssClass="facebook"  />
            <asp:Image ID="Image3" runat="server" 
                    ImageUrl="~/App_Themes/nopBlue/icons/twitter.png" CssClass="twitter" />
            <asp:Image ID="Image4" runat="server" 
                    ImageUrl="~/App_Themes/nopBlue/icons/linkedin.png" CssClass="linkedin" />         
        </div> 
        <!-- End FOOTER -->

and the css file for the footer:

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
    width:100%;
}

Update

Here is the code from the browser:

http://jsfiddle.net/laziale/seZT8/

Second update

Here is the online url for the problem page:

http://www.5280.bz/d/nopCommerceSite/Cellphones.aspx

Solution

    • First you should fix all your validation errors, lot's of thing to be fixed...

    • The positioning is caused by to missing </div> - the footer is nested within the newsletter block. Add two times </div> just before <!-- End RIGHT Side -->

    • Then change #footer css to:

      text-align:center;
width:100%;

    • That should fix it...