Web Analytics Made Easy -
StatCounter Bottom positioning - CodingForum

Announcement

Collapse
No announcement yet.

Bottom positioning

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Bottom positioning

    Hi,

    I'm trying to position something on the bottom right corner of my page using CSS. I'm using the following code to do that but it hasn't come out how I wanted.

    Code:
    #bottom {
    position: absolute;
    bottom: 0px; right: 0px;
    width: 500px; height: 30px;
    background-color: #D5DCFF;
    border-style: solid; border-width: 1px; border-color: #000000;
    }
    It does position it on the bottom right perfectly, until the content runs longer than the page, the div doesn't move to accommodate it. I've tried relative positioning but that was worse.

    Any pointers to make this work would be much appreciated!

    Thank you

  • #2
    Absolute posiitioning will place an element relative to its container. To get it on the bottom right of an expanding element, you can do something like this:

    Code:
    #wrapper {
     position: relative;
    }
    
    #bottom {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 500px;
     height: 30px;
    }
    
    <div id="wrapper">
     <div id="bottom">
     </div>
    <div>
    Now #bottom will always be at the bottom-right of #wrapper, even when #wrapper expands.
    drums | web

    Comment


    • #3
      Thank you for that

      I had initially tried to wrap it which didn't work, this time I wrapped it in something that was already there that also held the contents.

      Now to sort out the IE problem!

      Comment

      Working...
      X