Div always on the bottom of the content. Not fixed

HTML & CSS
1

Hi,

I have a scrolling browser window with two div full of text,
at the bottom of the page there is a div with an image with a given height and a width to 100% like this.
This situation it’s OK when the content of the entire document is higher than the screen height, like this:

I want to keep that #bottom_div to the bottom also when the content of the entire document is small,
and here the browser window is not scrolling anymore. like this:
(also keeping a “min-margin” between the two divs, in case I reduce the browser window)

all these divs aren’t positioned with absolute positioning. the structure of the page is like this:


<div id='content'>
   <div id='div_1'>
   </div>
   <div id='div_2'>
   </div>
</div>
<div id='bottom_div'>
</div>

I have tried positioning the #bottom_div as absolute (but I’m not using absolute in the entire document) with bottom:0 but doing this
the div is fixed to the bottom but remain to the same position also when you scroll the window hiding the text below.

I hope I have been clear,
Can you help me please?

many thanks to everybody!

2

It sounds like what you want is a “sticky footer”, which is slightly tricky to do. Here is a detailed explanation of how to do it:

Walk through that explanation, and please let us know if you have any questions. :slight_smile:

3

Yesss, thanks!!
it’s a “sticky footer”, this is the code for the second image:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <style type='text/css'>
      body, html {
         background: #A7B1B2;
         height: 100%;
         margin: 0;
         padding: 0;
      }

      #outer {
         width: 800px;
         margin: auto;
         min-height: 100%;
         margin-top: -70px;
      }

      * html #outer { /* for IE <= 6 */
	     height:100%
      }

      #empty_div {
         height: 70px;
      }

      #div_1 {
         background: #4CC1FB;
         width: 210px;
         height: 120px;
         margin: auto;
         margin-top: 15px;
      }

      #bottom_div {
         background: #FF5A5A;
         width: 100%;
         height: 70px;
      }

      #min_margin {
         height: 80px;
      }
   </style>
   <title></title>
   <meta name="description" content="#">
   <meta name="keywords" content="#">
   </head>
   <body>
      <div id='outer'>
         <div id='empty_div'>
         </div>
         <div id='div_1'>
         </div>
         <div id='min_margin'>
         </div>
      </div>
      <div id='bottom_div'>
      </div>
   </body>
</html>

I have a second question about one thing that I see during coding:

try to comment in the html document “empty_div” and “bottom_div” and in the css “margin-top: -70px”.
-> So why the “div_1” produce a scrolling in the browser?
It seems that “outer” goes down with 15px and not “div_1”. why this?
But adding an element above “div_1”, even if you add a simple border to outer, all it’s ok.

Can you tell me something more about this situation?

thanks again.

4

Because of MARGIN COLLAPSE. VERTICAL MARGINS ( top/bottom) of NON POSITIONED, NON FLOATED ELEMENTS MERGE into each other UNLESS there is something like padding or borders between the two elements.

Read more about margin collapse here

Ciao. Spero che ho aiutato.