I promise, I searched for my issue, couldn't find one that worked.



say we have a page set up like the image that's attached, i would like the #box div to be at the bottom of the #wrap div like in the image, where the #wrap div is variable height on each page. a simple quick example of the css:

    #wrap {
      width: 960px;
      height: 500px;
      margin: auto;
    }
    .stuff1 {
      width: inherit;
      height: 100px;
      margin: 0px;
    }
    .stuff2 {
      width: 470px;
      height: 150px;
      float: left;
      margin: 0px;
    }
    #box {
      width: inherit;
      height: 60px;
    }

imagine a gap of space between the .stuff2 divs and the #box divs, how could i make the #box div stay at the bottom of the #wrap div at all times? Your help is appreciated in advance!

Use margin property. For example.

margin: 10px; 0px; 10px; 0px; etc..
if you want space within div then use padding.

Assign the parent div a relative position and the child div an absolute position with bottom:0

So in this case:

#wrap { 
   width: 960px
   height: 500px;
   margin: auto;
   position: relative;
}
.stuff1 {
   width: inherit;
   height: 100px;
   margin: 0px;
}

.stuff2 {
   width: 470px;
   height: 150px;
   float: left;
   margin: 0px;
    
#box {
   width: inherit;
   height: 60px;
   position: absolute;
   bottom: 0;
}

so both of the methods you two have shown will work when the #wrap div is long enough to require the page to scroll?

also, thanks very much for the replies

Any Tips on how to make it internet explorer friendly?

As long as you make the parent div position absolute and the child div position relative with bottom:0... it "should" work in IE too.