Search code examples
csstwitter-bootstrappositioningabsolute

How do i properly position absolute divs within twitters bootstrap css framework

I can't seem to get a div to absolutely position within its parent using the twitter bootstrap framework. I have a series of rows that follow a scheme as follows

<div id='wrapper'>
<div class='row-fluid'>
    <div class='span2'>some content here</div>
    <div class='span9'>other content to the side of the first div</div>
    <div class='timestamp'>123456 this should align to the bottom right of wrapper</div>
</div>
</div>

css

.timestamp{
   position:absolute;
   bottom:0px;
   right:0px;
}

But the timestamp div always positions itself to the absolute of the body of the whole dom document ignoring any intermediate divs. Any ideas what is causing this?

Solution

  • Your css should include

     #wrapper {
    position: relative;
}

    The default positioning is static.

    check out this article: http://css-tricks.com/absolute-positioning-inside-relative-positioning/