65.9K
CodeProject is changing. Read more.
Home

Fixed Div At The Bottom Of The Page

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.17/5 (5 votes)

Oct 11, 2013

CPOL
viewsIcon

30772

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

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 :)