Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Fixed Div At The Bottom Of The Page

0.00/5 (No votes)
28 Feb 2014 1  
Hi everybody,I am going to write an example div fixed in the bottom. First let's write our divs to be fixed in bottom.----------  <div

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

Fixing a <div> at the bottom of the page

Hi everybody,
I am going to write an example div fixed in the bottom. First let's write our divs to be fixed at the bottom.

<div id="ContainerDiv">
    <div id="InnerContainer">
        <div id="TheBelowDiv">
            I'm at the bottom of the page.
        </div>
    </div>
</div>

Now let's write our CSS codes.

#ContainerDiv {
  margin: auto;
  position: fixed;
  margin: auto;
  left: 0;
  bottom: 0;
  width: 100%;
}

#InnerContainer {
  width: 100%;
}

#TheBelowDiv {
  font-size: 18pt;
  font-family: Tahoma;
  text-align: center;
  color: white;
} 

After this, we have the div at the bottom. Have a nice day :)

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here