CODEWITHSUNDEEP
csshtml
birdus
birdus

Reputation: 7504

How to make div move to bottom of page

I'm trying to move a div from the top of the page down to the bottom, but it's not working.

Here's the div and its CSS:

  <div class="slides">
    <?php include 'slides.php'; ?>
  </div>

.slides {
    width: 990px;
    height: 390px;
    margin-bottom: 15px;
}

I've got the code (some of it, anyway) over on jfiddle:

http://jsfiddle.net/jerU7/

You can see the original page here:

http://www.autotrafficinfo.com/

I need to move the rotating banner at the top down to the bottom just above the footer. I moved the div (class="slides") down to the bottom of the html, but it's staying at the top. I realize you can make divs do things that aren't apparent, but I'm not sure how to make this one move down.

In the code on jfiddle, you can see that the text ("Real time traffic for 1.6 million...") is up at the top. The rotating images are, in fact, appearing towards the bottom (although all three are appearing there, instead of one at a time and rotating, because the java script isn't hooked up). The text and banners should all be at the bottom.

How do I scoot the div (class="slides") down so that it's just above the footer?

Upvotes: 1

Views: 4524

Answers (3)

middleinitial
middleinitial

Reputation: 659

Your code needs a bit of restructuring.

  1. Wrap all the divs from #greenSmall to #green in a new .content div.
  2. Remove the css property float:left from #green
  3. Move the .slides div to below the .content div and above the footer div.

Upvotes: 1

Daprela
Daprela

Reputation: 11

The code on the above answer is almost correct but it misses an element. For the 'top' and 'bottom' to work, the element must be positioned absolutely. So, the above code will become

.slides{
  position: absolute;      
  top:97%; // Or designate the px location if you so desire
  width: 990px;
  height: 390px;
  margin-bottom: 15px;

}

Upvotes: 1

Cole Busby
Cole Busby

Reputation: 398

css:

  .slides{
      top:97%; // Or designate the px location if you so desire
      width: 990px;
      height: 390px;
      margin-bottom: 15px;
  }

Upvotes: 1

Related Questions