I'm having an issue with my CSS where the footer element overlaps the main content when the window is shrunk. I'd quite like it so that when the window is shrunk the footer shrinks with it until it comes into contact with the main elements of the page and then after that the scrollbars appear allowing you to scroll down. At the moment the window just keeps shrinking and the footer text just overlaps all the content.

I've included the relevant CSS code below. Any help is very much appreciated.

.body
{   
    /* layout */
    display: block;
    width: 875px;
    bottom: 150px;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

.left_main
{
    display: inline;
    position: relative;
    float: left;
    margin-left: 25px;
    top: 0px;
    left: 0px;
    right: 250px;
    width: 600px;
}

.map_right_menu
{
    /* text and font */
    text-align: center;

    /* layout */
    display: inline;
    position: relative;
    float: right;
    top: 0px;
    right: 0px;
    width: 200px;
    margin-right: 25px;
    margin-left: 25px;
    padding: 0px;
}

.footer
{
    /* text and font */
    font-size: 12px;
    text-align: center;

    /* layout */
    position: absolute;
    height: 100px;
    width: 875px;
    bottom: 0px;
    margin: 0px;
    padding: 0px;
}

2 answers

0
points
This was chosen as the best answer

Here is a quick example on how to keep the footer at the bottom of the page, regardless of the size of the window.

Here is the HTML structure:

<body>
<div class="container">
    <div class="body">

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

    </div>
</div>

Here is the CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}

.container {
   min-height:100%;
   position:relative;
}

.body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}

.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
}
Answered over 6 years ago by Neil Craig
  • Excellent that worked like a treat with a little mucking about. Thanks for the help. Simon over 6 years ago
1
point

you've absolutely positioned the footer at the bottom of the viewport, but not made space for it, so it will overlap content at some point.

Don't re-invent the wheel, use this sticky footer technique (which adds padding to the bottom of a wrapper to prevent the footer height from touching content.)

Answered over 6 years ago by Tony Crockford