Home/ Questions/Q 3959598
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T02:44:59+00:00

I’m not quite sure how to ask this question. What I’m trying to do

  • 0

I’m not quite sure how to ask this question. What I’m trying to do is have an element on the bottom of my page that will always stick to the bottom, but if the page is too short it will be pushed down by the other elements on the page.

Example:

The left side middle graphic and the right titles are all contained within #mainBodyContent. If the browser window is small enough that this div runs into the “Latest in Geek” flash box, I want the flash box to be pushed down. However if #mainBodyContent isn’t running into the flash box, I want the flash box to stick to the bottom in the place where it’s at currently. I’m rather confused as how to pull it off.

Any suggestions/help out there? Am I making sense?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use absolute positioning combined with padding. Example can be seen here:

    Static Footer Example

    <html>
<head>
<style type="text/css">
    html, body { height:100%; }

    /* layout */
    #container { 
        width:800px; margin: 0px auto; 
        position: relative; min-height: 100%; 
    }
    #top { height: 12px; } /* margin on header breaks liquid layout */
    #header { position: relative; }
    #content { padding-bottom: 72px; } /* 60px footer height plus 12px padding */
    #footer {
        clear: both;
        position:absolute;
        bottom: 0px;
        width:100%;
        height:60px;   
        text-transform: uppercase;
        background-color: red;
     }
    .section { 
        margin-top: 12px; 
        padding-top: 12px; 
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

</style>
</head>
<body>
    <div id="container">
        <div id="top"></div>    
        <div id="header">
            <h1>Title</h1>
        </div><!-- end header div -->

        <div id="content">

            <div class="section">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

        </div><!-- end content div -->

        <div id="footer">Footer content here</div>

    </div><!-- end container div -->
</body>

    • 0