Cross browser CSS botton align footer required

Posted on 2005-05-03
Last Modified: 2012-05-05
i'm having problems getting various css hacks to work on getting my css consistent across mozilla and IE (windows only at this stage). is the URL.

FYI, I have started with this template found here :

any direction greatly appreciated..

Question by:dtank
    1 Comment
    LVL 30

    Accepted Solution

    remember that it's strongly recommended not to use any bottom-aligned footer technique with css layouts.  it simply does not work well.
    i.e.: in IE, when your browser width is less than 760px, you get a horizontal scrollbar... that's normal... but the horizontal scrollbar overlaps the footer, which has the side effect of showing the vertical scrollbar... and now you need to scroll to see your footer.

    for your current attempt, the only thing i noticed is the footer that does not align to the left in IE.
    You can fix that using "left: 0" on your footer.
    i would also remove the "bottom: -1px" that makes the scrollbar flicker.

    #container-foot {
      width: 100%;
      background: #aaa;
      position: absolute;
      bottom: 0 !important;
      left: 0;
      height: 40px;

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Most web designers often experience crossbrowser issues during interface design / development.  On common problem is with Internet Explorer due to its rendering discrepancies between previous versions.  Here are some techniques I use to help avoid c…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now